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

Question

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

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

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

任何想法为什么右框不动画？

使用Gumby inview扩展: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的动画的原因相同.原因是浏览器批量修改这些修改并优化动画.这里讨论原因和解决方案.

从文章中,您的选择是(转述):

1. 在重新添加类之前添加一个小延迟(不推荐)
2. 克隆元素,删除它,然后插入克隆
3. 有2个相同的动画(附加到不同的css规则)并在它们之间切换
4. 在删除和添加类名之间触发重排:

        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. 将元素的CSS 动画播放状态属性更改(循环)为paused或running(不重新启动动画)

Answer 2

我认为你只需要添加动画作为一个类而不是data-classname="animated"......

所以基本上：

<div class="six columns text-center fadeInLeftMedium delay_2 inview" data-classname="animated">
    <!-- right box content here -->
</div>

应该：

<div class="six columns text-center fadeInLeftMedium delay_2 inview animated">
    <!-- right box content here -->
</div>

否则，动画缺少指定的动画持续时间，并且如果没有指定动画持续时间属性，动画将无法工作。