使用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設置不透明度時使用凍結

回答

相關問題