javascript - 按钮点击动画 svg rect

Question

我想为 svg rect 的宽度设置动画。

最初，矩形宽度应为 0，单击按钮时宽度应在 5 秒内增长到宽度的 100%。

我创建了这个代码框。

我基本上创建了这个类：

.grow {
  animation: growAnimation 5s linear 1;
}

@keyframes growAnimation {
  from {
    transform: scale(0%, 100%);
  }
  to {
    transform: scale(100%, 100%);
  }
}

我仅在用户单击按钮时才分配此类，但它不起作用：矩形宽度为 0，单击时为 100%，5 秒内没有增长。为什么？

有更好的方法吗？将来我还要做一个按住动画：

• 在按钮上单击动画开始
• on 按钮按住动画继续
• 如果用户在增长动画结束之前释放按钮，则会出现反向动画（从 100% 到 0%）。

标签： javascriptcssreactjsanimationsvg

Answer 1

您应该将参数scale作为数字而不是百分比传递给属性：

@keyframes growAnimation {
  from {
    transform: scale(0, 1);
  }
  to {
    transform: scale(1, 1);
  }
}

请参阅此工作示例