一个动画完了,还想触发,怎么弄?
$el.removeClass('run').addClass('run')
这样做,不行。
因为浏览器发现删除的和新加的是同一个通话,而浏览器不会让同一个动画多次两次。
如何解决?
1、触发reflow时间
$el.removeClass('run');
$el[0].offsetWidth = $el[0].offsetWidth;
$el.addClass('run');
2 两个动画内容一样,但名字不一样。这样欺骗浏览器动画内容不一样
@keyframes run1{
to{
opacity: 0;
}
}
@keyframes run2{
to{
opacity: 0;
}
}
1 https://css-tricks.com/restart-css-animation/
2 http://tech.noredink.com/post/135195074668/creating-repeatable-css-animations-with-sass?utm_source=html5weekly&utm_medium=email