[英]How to animate an SVG's paths fill-opacity property?
I have the following Gauge component: 我有以下仪表组件:
The component is also rendering here: https://codesandbox.io/s/react-example-e3nxg 该组件也在此处呈现: https : //codesandbox.io/s/react-example-e3nxg
The component takes the prop rating
as a number. 该组件将道具
rating
作为数字。
What I'd love to learn how to do is animate the path's opacity values. 我想学习如何做的是为路径的不透明度值设置动画。 For example, if the prop for rating is passed a value of
5
... How to make it so the component animates in each path, one at a time on a set time-delay between each path. 例如,如果为评级道具传递的值是
5
...如何使其如此,则组件将在每条路径中进行动画处理,一次在每条路径之间的设定时间上进行一次动画处理。
Any ideas on how this could be done? 关于如何做到这一点的任何想法?
Please checkout the sandbox url Sandbox link 请检出沙盒网址沙盒链接
I made a little change in the css 我对CSS进行了一些更改
#gauge {
fill: red;
}
.Animate-Draw {
fill-opacity: 0;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
animation-name: FillIn;
animation-duration: 4s 0.5s;
/* animation-delay: .5s; */
}
.Animate-Draw:nth-child(1) {
animation-delay: 0.5s;
}
.Animate-Draw:nth-child(2) {
animation-delay: 1s;
}
.Animate-Draw:nth-child(3) {
animation-delay: 1.5s;
}
.Animate-Draw:nth-child(4) {
animation-delay: 2s;
}
.Animate-Draw:nth-child(5) {
animation-delay: 2.5s;
}
.Animate-Draw:nth-child(6) {
animation-delay: 3s;
}
.Animate-Draw:nth-child(7) {
animation-delay: 3.5s;
}
.Animate-Draw:nth-child(8) {
animation-delay: 4s;
}
@keyframes FillIn {
from {
fill-opacity: 0;
}
to {
fill-opacity: 1;
}
}
I hope this is what you are looking for. 我希望这是您要寻找的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.