单击按钮时动画 svg rect

Question

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

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

我创建了这个codeandbox 。

我基本上创建了这个类：

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

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

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

有没有更好的方法来解决这个问题？ 将来我还必须做一个按住动画：

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

Answer 1

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

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

请参阅此工作示例