代码之家 › 专栏 › 技术社区 › Mathias F

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

svg javascript

Mathias F · 技术社区 · 11 年前

我有一个图像上的动画,该动画在2秒后淡出图像,并在动画完成后使用fill=“冻结”保持图像可见。

动画工作正常。

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

2 回复 | 直到 11 年前

Oscar Paz 11 年前

使用animationEnd事件了解动画何时完成。在处理程序中,移除动画并将不透明度设置为1:

下面是一个跨浏览器代码,它可以做到这一点:

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

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

希望这对你有所帮助。

helderdarocha 11 年前

如果您只是想使图像不可见,可以将其从DOM树中删除:

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

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

你可以在这里测试 JSFiddle

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

5 月前

Alex · 在轻量级中同时解构和不解构变量

5 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

5 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

5 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

5 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

user3472810 · Angular@Output/EventEmitter返回undefined

6 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

6 月前