动画.CSS重播
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问题#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,
})}
...
)
- CSS-如何定位内容数据标题
- 窗口大小html css
- 如果文本字段为空,则使用JavaScript应用CSS样式
- 动画.CSS重播
- 有没有一种方法可以防止img get请求使用css或js发生
- CSS表格:从列平移到整个表格宽度
- CKEditor-我在editor.css中的风格是't
- 单击更改图标并通过javascript添加一个css类
- 将CSS应用于printWindow.print();在Javascript中
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- css(或jQuery)悬停时淡入淡出
- 为什么不'在JQuery中找到第二个css选择器的工作
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- 如何使用css动画/javascript使具有背景图像的元素出现
- 获取HTML属性中CSS声明的值
- 当我更改Joomla时,它仍然从旧域加载CSS和Javascript
- 如何使用css动画从中心增加边界线
- 谷歌图表-如何更改整个表的css属性
- 使用CSS或JavaScript计算分页符的数量