通过js添加类不会触发CSS动画 [英] Adding class via js won't trigger css animation
问题描述
我有一个 animate.css
的修改版(增加了一些延迟,新的时间安排和新的职位),并且在默认情况下设置类(html文档)时,它的工作原理非常好.但是当我通过js动态添加动画类时,不会执行动画!
I have a modified version of animate.css
(added some delay, new timings and new positions), and it works really great when the classes are set by default (html document). But when I am adding the animate class dynamically via js, the animation is not executed!
更烦人的是,我确实在某个时候可以使它工作,但是我无法使其再次工作(当元素在屏幕上时使用gumby框架和inview js添加一个类(添加.animated)).左框具有html中已经存在的类,右框具有js添加的.animate类.
Even more annoying, I did have it working at some point, but I can't get it to work again (using gumby framework and inview js to add a class when the element is on screen (adding .animated)) . The left box had the classes already in the html, and the right box have the .animate class added by js.
示例:
http://onepageframework.com/28_2_14/strange_anim.html
有什么想法为什么右边的盒子没有动画?
Any ideas why the right box is not animating?
使用Gumby inview扩展名: http://gumbyframework.com/docs/extensions/#!/inview
Using the Gumby inview extension: http://gumbyframework.com/docs/extensions/#!/inview
添加了html:
<div class="six columns text-center fadeInLeftMedium delay_2 animated">
<!-- left box content here -->
</div>
<div class="six columns text-center fadeInLeftMedium delay_2 inview" data-classname="animated">
<!-- right box content here -->
</div>
css:
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.delay_2 {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
@-webkit-keyframes fadeInLeftMedium {
0% {
opacity: 0;
-webkit-transform: translateX(-400px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInLeftMedium {
0% {
opacity: 0;
-moz-transform: translateX(-400px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-o-keyframes fadeInLeftMedium {
0% {
opacity: 0;
-o-transform: translateX(-400px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInLeftMedium {
0% {
opacity: 0;
transform: translateX(-400px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInLeftMedium {
-webkit-animation-name: fadeInLeftMedium;
-moz-animation-name: fadeInLeftMedium;
-o-animation-name: fadeInLeftMedium;
animation-name: fadeInLeftMedium;
}
推荐答案
原因相同,为什么您只能通过随后删除并添加一个类来重新触发基于CSS的动画.原因是浏览器对这些修改进行批处理并优化了动画.在此处中讨论原因和解决方案.
The reason is the same why you can't re-trigger CSS based animations by just subsequently removing and adding a class. The reason is that browsers batch-up these modifications and optimize away the animation. Reason and solutions are discussed here.
在本文中,您的选择(解释为):
From the article, your options are (paraphrased):
- 在重新添加课程之前稍加延迟(不推荐)
- 克隆元素,将其删除,然后插入克隆
- 具有2个相同的动画(附加到不同的CSS规则)并在它们之间切换
- 在删除和添加类名之间触发重排:
element.classList.remove("run-animation");
// element.offsetWidth = element.offsetWidth; //doesn't work in strict mode
void element.offsetWidth; // reading the property requires a recalc
element.classList.add("run-animation");
- 更改(循环)元素的CSS 动画播放-state 属性设置为
已暂停
或正在运行
(不会重新启动动画)
- Change (cycle) the element's CSS animation-play-state attribute to
paused
orrunning
(does not restart animation)
这篇关于通过js添加类不会触发CSS动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!