html - 通过js添加类不会触发css动画

Question

我有一个修改过的 animate.css 版本(添加了一些延迟、新的时间和新的位置)，当类被默认设置时(html 文档)它工作得非常好。但是当我通过js动态添加动画类时，动画没有执行!

更烦人的是，我确实让它在某些时候工作，但我无法让它再次工作(当元素在屏幕上时使用 gumby 框架和 inview js 添加一个类(添加.animated))。左边的框是html中已有的类，右边的框是js添加的.animate类。

例子:
http://onepageframework.com/28_2_14/strange_anim.html

知道为什么右框没有动画吗？

使用 Gumby View 扩展: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;
}

Answer 1

原因与您不能通过随后删除和添加类来重新触发基于 CSS 的动画的原因相同。原因是浏览器会批量处理这些修改并优化动画。 讨论原因及解决办法here .

从文章中，您的选择是(释义):

1. Add a small delay before re-adding the class (not recommended)
2. Clone the element, remove it, and insert the clone
3. Have 2 identical animations (attached to different css rules) and switch between them
4. Trigger a reflow between removing and adding the class name:

        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");

5. Change (cycle) the element's CSS animation-play-state attribute to paused or running (does not restart animation)