所以,我正在制作一个 SVG 按钮的动画,我想通过 Javascript 制作转换属性与带有不透明度属性的淡出相结合的动画。
代码看起来像这样:(考虑到它带有不透明度 0 和比例 0)
(我知道我这样做的方式是不正确的,因为它一直覆盖到最后设置的属性)
function hiA(){
pathA.setAttribute("transform", "scale(1)");
pathA.setAttribute("transform", "scale(.5)");
pathA.setAttribute("transform", "scale(1)");
pathA.setAttribute("opacity", "1");
}
相同但相反:(考虑到不透明度为 1 和比例为 1)
function byeA(){
pathA.setAttribute("transform", "scale(.5)");
pathA.setAttribute("transform", "scale(1)");
pathA.setAttribute("transform", "scale(0)");
pathA.setAttribute("opacity", "0");
}
我不知道是否可以,或者在 CSS 上添加带有动画的类是否更好。
最佳答案
您可以在 css 中设置类和样式:https://www.w3schools.com/css/css3_animations.asp
JS:
pathA.className+="hiA"
CSS:
@keyframes example {
0% {transform:scale(1);}
50% {transform:scale(.5)}
100% {transform:scale(1);opacity:1;}
}
.hiA{
animation: example 1s;
}
参见示例:
function hiA(){
var pathA=document.getElementById("pathA");
pathA.className="hiA";
setTimeout(function(){ pathA.className=""; }, 3000);
}
@keyframes example {
0% {transform:scale(.5);}
50% {transform:scale(1);}
100% {transform:scale(0);}
}
.hiA{
animation: example 3s;
}
<button onclick="hiA()" id="pathA">animation me</button>
教育
关于javascript - 通过 Javascript 动画变换比例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51963072/