Ich habe eine CSS-Animationsklasse eingerichtet, damit ich das
-Element animieren kann.
Wenn auf die Eingabeschaltfläche geklickt wird, wird diese Klasse zu
hinzugefügt und ich möchte, dass
jedes Mal zum Bildschirm fliegt, wenn auf die Eingabeschaltfläche im Beispiel geklickt wird.
Allerdings funktioniert es nur beim ersten Mal. Bei nachfolgenden Eingabeklicks wird das Element nicht animiert. Was fehlt mir hier?
$( document ).ready(function() { jQuery('#cloc').click(function () { jQuery('p').removeClass('anim').promise().done(function() { jQuery('p').addClass('anim'); }); }); });
input { margin-bottom:20px; margin-top:50px; } p { opacity:1; } .anim { animation-duration: 200ms; animation-name: slidein; } @keyframes slidein { from { transform:translateX(-200px); opacity:0; } to { transform:translateX(0px); opacity:1; } } p { position:absolute; left:0px; opacity:0; animation-fill-mode: forwards; animation-iteration-count: 1; }
HERE IS A TESTER FOR YOU.
您需要向animationend事件添加新的事件侦听器，以将属性
animation-name重置为none
像下面的代码：
$( document ).ready(function() { $('#cloc').click(function () { $('p').removeClass('anim').promise().done(function() { $('p').addClass('anim'); setTimeout(function() { $('p').removeClass('anim'); },1000); }); }); });