按钮点击动画 svg rect答案

【问题标题】：Animate svg rect on button click按钮点击动画 svg rect
【发布时间】：2019-12-16 11:23:32
【问题描述】：

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

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

我创建了这个codesandbox。

我基本上创建了这个类：

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

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

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

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

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

【问题讨论】：

你看过react-move。这是一个用于简化动画的很棒的库。这是我不久前创建的CodeSandbox，您可以在其中玩。

标签： javascript css reactjs animation svg

【解决方案1】：

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

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

See this Working Example

【讨论】：