javascript - 通过 Javascript 动画变换比例

Question

所以，我正在制作一个 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 上添加带有动画的类是否更好。

Answer 1

您可以在 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>

教育