[英]Animate.CSS Replay?
我有一个使用Animate.CSS的动画,如果用户愿意,我想重放它,但我尝试的方法不起作用。 这是代码:
HTML:
<div class="img-center">
<img src="path.jpg" class="feature-image animated rotateInDownRight" />
</div>
<p class="textcenter"> </p>
<div class="img-center">
<a href="#" id="replay">Replay</a>
</div>
JS:
var $j = jQuery.noConflict();
$j("#replay").click(function() {
$j('.feature-image').removeClass('animated rotateInDownRight').addClass('animated rotateInDownRight');
});
我确实知道脚本本身可以工作,因为我可以在 Firebug 中看到它发生,但是该动画不会再次设置动画。 我如何使用 Animate.CSS 实现这一点?
这只是一个猜测,但似乎 jQuery 并没有“完成”删除该类,然后再将其添加回来。我知道这没有意义,但这就是 JavaScript 的工作方式。 它可以在第一个函数的所有内容完成之前调用链中的下一个函数。 我浏览了 Animate.CSS 网站上的代码,看到他们在动画功能中使用了超时。 你也可以试试。 这是他们的代码:
function testAnim(x) {
$('#animateTest').removeClass().addClass(x);
var wait = window.setTimeout( function(){
$('#animateTest').removeClass()},
1300
);
}
这所做的与您正在做的完全一样,只是它等待动画完成,然后删除类。 这样当另一个类被添加回来时,它对标签来说真的是“新的”。 这是一个稍微修改的函数:
function testAnim(elementId, animClasses) {
$(elementId).addClass(animClasses);
var wait = window.setTimeout( function(){
$(elementId).removeClass(animClasses)},
1300
);
}
请注意两件事:首先,此代码将允许您更改获取动画的元素。 其次,删除 1300 毫秒后添加的类。 仍然不是 100%,但它可能会让你走得更远。
需要注意的是,如果对象上已经有一些动画类,它可能会破坏这个 JS。
在animate.css issue#3找到正确答案
var $at = $('#animateTest').removeClass();
//timeout is important !!
setTimeout(function(){
$at.addClass('flash')
}, 10);
实际上,更简单的版本也可以避免使用 JQuery。
el.classList.remove('animated','flash');
//timeout is important !!
setTimeout(function(){
el.classList.add('animated','flash');
}, 10);
我相信这里的问题是,当我删除该类时,它会快速添加该类。 这是我解决这个问题的方法:
(HTML 与上述问题相同)。
JS:
var $j = jQuery.noConflict();
window.setTimeout( function(){
$j('.feature-image').removeClass('animated rotateInDownRight')},
1300);
$j("#replay").click(function() {
$j('.feature-image').addClass('animated rotateInDownRight');
});
我相信正在发生的是 jQuery 代码正在快速删除和添加类。 无论此代码有效的原因如何。
如果你愿意,你也可以尝试这个支持animate.css动画的 javaScript 端开发。 下面是一个使用示例。
//Select the elements to animate and enjoy!
var elt = document.querySelector("#notification") ;
iJS.animate(elt, "shake") ;
//it return an AnimationPlayer object
//animation iteration and duration can also be indicated.
var vivifyElt = iJS.animate(elt, "bounce", 3, 500) ;
vivifyElt.onfinish = function(e) {
//doSomething ...;
}
// less than 1500ms later...changed mind!
vivifyElt.cancel();
看看这里
我的答案是添加/删除带有色调延迟的css
class
的技巧:
$('#Box').removeClass('animated').hide().delay(1).queue(function() {
$(this).addClass('animated').show().dequeue();
});
你也可以在没有隐藏/显示方法的情况下测试它:
$('#Box').removeClass('animated').delay(1).queue(function() {
$(this).addClass('animated').dequeue();
});
我填充它在chrome
运行流畅,但它在FF
出现更多意外延迟,因此您可以测试此 js 超时:
$('#Box').removeClass('animated');
setTimeout(function(){
$('#Box').addClass('animated');
}, 1);
该解决方案依赖于 React useEffect
,并且相当干净,因为它避免了直接操作类名。
它并没有真正回答 OP 问题(似乎使用 jQuery),但它可能对许多使用 React 和 Animate CSS 库的人仍然有用。
const [repeatAnimation, setRepeatAnimation] = useState<boolean>(true);
/**
* When the displayedFrom changes, replay the animations of the component.
* It toggles the CSS classes injected in the component to force replaying the animations.
* Uses a short timeout that isn't noticeable to the human eye, but is necessary for the toggle to work properly.
*/
useEffect(() => {
setRepeatAnimation(false);
setTimeout(() => setRepeatAnimation(true), 100);
}, [displayedFrom]);
return (
<div
className={classnames('block-picker-menu', {
'animate__animated': repeatAnimation,
'animate__pulse': repeatAnimation,
})}
...
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.