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

我有一个图像上的动画，在2秒后淡入图像，并使用填充=“冻结”完成动画后可见的图像。使用javascript设置不透明度时使用冻结

动画按预期工作。

如何在冻结设置时通过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>

来源

2014-03-06 Mathias F

究竟是什么，你希望当图像应该发生点击？ –

它应该隐形 –

使用animationEnd事件，知道什么时候该动画结束。在处理程序，删除动画，并设置不透明度= 1：

这里是一个跨浏览器的代码，不会说：

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

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

希望这可以帮助你。

来源

2014-03-06 20:18:58

动画不是由scipt开始的。它只是运行，因为它是图像的小孩。但我仍然会尝试通过脚本删除它。 –

我明白了。那么，在我的代码的注释部分，只需使用DOM删除动画（我认为这样做，我从来没有使用SVG） –

通过调用img1.removeChild（img1.firstChild）并设置动画此后不透明度达到1次。 –

如果你只是想使图像不可见的，你可以从DOM树删除：

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

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

你可以在这里进行测试JSFiddle

来源

2014-03-06 21:34:58 helderdarocha

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

回答

相关问题