[英]Animate svg rect on button click
I want to animate the width of a svg rect.我想为 svg 矩形的宽度设置动画。
Initially, rect width should be 0, on button click the width should grow in 5 seconds to 100% of the width.最初,矩形宽度应为 0,单击按钮时,宽度应在 5 秒内增长到宽度的 100%。
I create this codesandbox .我创建了这个codeandbox 。
I basically create this class:我基本上创建了这个类:
.grow {
animation: growAnimation 5s linear 1;
}
@keyframes growAnimation {
from {
transform: scale(0%, 100%);
}
to {
transform: scale(100%, 100%);
}
}
I assign this class only when user clicks on button but it doesn't work: rect width is 0 and on click is 100%, there is no growing during 5 seconds.我仅在用户单击按钮时分配此类,但它不起作用:矩形宽度为 0,单击时为 100%,在 5 秒内没有增长。 Why?
为什么?
Is there a better way to to this?有没有更好的方法来解决这个问题? In the future I have to do also a press and hold animation:
将来我还必须做一个按住动画:
you should pass parameters to scale
property as number not as percentage:您应该将参数作为数字而不是百分比传递给
scale
属性:
@keyframes growAnimation {
from {
transform: scale(0, 1);
}
to {
transform: scale(1, 1);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.