12

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

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

示例： 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;
}
4

3 回答 3

22

原因与您不能通过随后删除和添加类来重新触发基于 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");
  1. 将元素的 CSS动画播放状态属性更改（循环）为paused或running（不重新启动动画）
于 2015-05-06T08:58:24.900 回答
-1

通过交换类，看起来它可以工作了（在类中进行分类，并以 fadeInLeftMedium 作为数据类名）：

<div class="six columns text-center fadeInLeftMedium delay_2 animated">
    <!-- left box content here -->
</div>
<div class="six columns text-center animated delay_2 inview" data-classname="fadeInLeftMedium">
    <!-- right box content here -->
</div>
于 2014-02-28T12:00:05.227 回答
-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>

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

于 2014-02-28T11:53:17.310 回答