如何在animation.fill.mode中使用animate.css？

我有一個簡單的例子，當點擊一個按鈕時圖像淡入。我希望圖片在fadeIn-animation完成後保留下來，並嘗試使用animation-fill-mode：forwards來完成。但是，這是行不通的。我很感謝短暫的提示。如何在animation.fill.mode中使用animate.css？

這是我的代碼：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Animate.css!</title> 
    <link rel="stylesheet" href="animate.css"> 
</head> 
<body> 
<a href="#" class="button" id="first">Hola!</a> 
<img src="tucan.png" id="tucan" alt="Tucan"> 

<style type="text/css"> 
    body { 
     margin: 50px; 
     background: #2980b9; 
     font-family: sans-serif; 
     text-align: center; 
    } 

    a.button { 
     background:#e74c3c; 
     color: white; 
     padding: 20px; 
     text-decoration: none; 
     display: inline-block; 
     font-size: 50px; 
     border-radius: 10px; 
    } 

    #tucan { 
     opacity: 0; 
     -webkit-animation-duration: 3s; 
    -webkit-animation-delay: 0s; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
    } 



</style> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script> 
var animationName = 'animated fadeIn'; 
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; 

$(function(){ 
    $('#first').on('click',function(){ 
     $('#tucan').addClass(animationName).one(animationEnd, function(){ 
       $(this).removeClass(animationName); 
     }); 
    }); 
}); 


</script> 

</body> 
</html>

來源

2016-08-14 Nicole Walter

嘗試使用此

$('#first').on('click',function(){ 
    $('#tucan').addClass(animationName).one(animationEnd, function(){ 
      $(this).removeClass(animationName); 
      $(this).css("opacity", 1); 
    }); 
});

，或者嘗試

$('#first').on('click',function(){ 
    $('#tucan').addClass(animationName); 
});

來源

2016-08-14 15:58:54

非常感謝您的回答。我試過了，但不幸的是 - 出於某種原因，我不明白 - 它也不起作用。看起來我在其他地方犯了一個錯誤，因爲我在jsfiddle上找到了一個完全符合我想要的並且非常簡單的例子：http://fiddle.jshell.net/rcorp/TGPtG/1/light/ –

所以你只想在淡入淡出後留下圖像？爲什麼animationEnd？ removeClass將#tuncan不透明度設置爲'0'（如css中的原始狀態），如果要刪除該類，則將#tuncan不透明度設置爲1， –

如何在animation.fill.mode中使用animate.css？

回答

相關問題