Question

我在图像上有动画，在2秒后淡化图像，并在动画完成后使用fill =“freeze”保持图像可见。

动画按预期工作。

设置冻结时如何通过javascript更改不透明度？现在我不能改变脚本中的不透明度。如果我删除冻结我的脚本工作，但动画不再按预期工作（然后图像在完成后不可见）

   <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title></title>
    </head>
    <body>
<script language="javascript" type="text/javascript" >
window.onload = function() {
img1.addEventListener("click", clickImg);
};

function clickImg(event)
{
        event.target.setAttribute("opacity",'0');
}
</script>
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1" >


   <image x="25%" y="25%" width="30%" height="30%" id="img1" 
   opacity="0"

   preserveAspectRatio="xMinYMin meet"
     xlink:href="img/3dugs.jpg" >

      <animate attributeName="opacity" 
       fill="freeze"
   attributeType="CSS" 
   begin="2s" dur="2s" from="0" to="1" 
   repeatCount="1" />

     </image>
  </svg>
    </body>
</html>

Answer 1

使用animationEnd事件知道动画何时结束。在处理程序中，删除动画并设置opacity = 1：

这是一个跨浏览器的代码：

$('#img1').bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(){
    //remove the animation here.
    $(this).css('opacity', 1);
});

我想你通过将CSS类设置为包含动画的图像来启动动画。在我给你的处理程序中，删除所述类并将不透明度设置为1。

希望这会对你有所帮助。

Answer 2

如果您只是想让图像不可见，可以将其从DOM树中删除：

var img1 = document.getElementById("img1");
window.onload = function() {
    img1.addEventListener("click", clickImg);
};

function clickImg(event) {
    img1.style.display = "none";
}

您可以在此处JSFiddle

进行测试

使用冻结时通过javascript设置不透明度

2 个答案: