animation.fill.modeでanimate.cssを使用するにはどうすればよいですか？

ボタンをクリックすると画像がフェードインするという簡単な例があります。フェードインした後に画像を残しておきたい - アニメーションが完了し、アニメーション塗りつぶしモードでこれをやろうとした。しかし、それは動作しません。私は短いヒントに対して非常に感謝しています。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/ –

フェードインの後に画像を残したいだけですか？なぜアニメーション？ removeClassは、＃tuncan不透明度を '0'（cssのように元の状態）に設定します。削除する場合は、クラスを削除して#tuncan不透明度を1に設定し、 –

animation.fill.modeでanimate.cssを使用するにはどうすればよいですか？

答えて

関連する問題