时间戳

首页 > 解决方案 > 通过 Javascript 动画变换比例

javascript - 通过 Javascript 动画变换比例

问题描述

因此，我正在为 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 上添加一个带有动画的类。

标签： javascriptcssattributestransform

解决方案

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

ED

推荐阅读