AngularJS 1.2 - ngAnimate 不工作 [英] AngularJS 1.2 - ngAnimate not working

问题描述

我是在 AngularJS 1.2 中使用 ng-animate 的新手.我不确定为什么我的 ng-animate 不能使用某个类名，而是使用我在示例中看到的简单淡入的默认值.

I am new to using ng-animate with AngularJS 1.2. I am not sure why my ng-animate does not work a certain class name but works with the default for a simple fade in that I saw in an example.

在这个例子中，我尝试将我的 ng-animate 类设置为animation":http://plnkr.co/edit/QWQUUVdcLmzLKRvVibqN?p=preview

In this example, I try to set my ng-animate class to be 'animation': http://plnkr.co/edit/QWQUUVdcLmzLKRvVibqN?p=preview

但是当我使用默认值并且我的动画类名只是.ng-enter"和.ng-leave"时，淡入动画似乎工作正常.

but when I use the default, and my class name for animations is just ".ng-enter" and ".ng-leave", the fade in animation seems to work fine.

http://plnkr.co/edit/lEQhMwd6RWmsdmJbosu0?p=preview

任何帮助将不胜感激，谢谢！

Any help would be greatly appreciated, thanks!

推荐答案

ng-animate 属性在 1.2 中已弃用.

The ng-animate attribute is deprecated in 1.2.

在 1.2 中，您使用特殊的命名约定定义适当的 CSS 类.如果你想要一个像animation"这样的特定名称，你需要将该类添加到你想要动画的元素中.

In 1.2 you define the appropriate CSS classes using a special naming convention. If you want a specific name like 'animation', you need to add that class to the element you want to animate.

只要你有正确的 CSS 类，一些指令就会自动动画.哪些可以在这里找到:http://docs.angularjs.org/api/ngAnimate

As long as you have the correct CSS classes, some directives will be animated automatically. Which ones can be found here: http://docs.angularjs.org/api/ngAnimate

这就是你的动画在你的第二个例子中只定义.ng-enter"类时工作的原因.然而，这会自动为所有支持输入动画的指令设置动画.

This is the reason your animation works in your second example when just defining the ".ng-enter" class. This would however automatically animate all directives that support the enter animation.

我已经更新了您的第一个示例，使其适用于名为animation"的类:

I have updated your first example to make it work with the class named 'animation':

HTML:

<li ng-repeat="item in items" class="animation">{{item}}</li>

CSS(为了清晰起见，保持选择器未分组):

.animation {
  -webkit-transition: 1s;
}

.animation.ng-enter {
  opacity: 0;
}

.animation.ng-leave {
  opacity: 1;
}

.animation.ng-enter.ng-enter-active {
  opacity: 1;
}

.animation.ng-leave.ng-leave-active {
  opacity: 0;
}

Plunker: http://plnkr.co/edit/J0qJEMmwdzqXzu733fJf?p=预览

这篇关于AngularJS 1.2 - ngAnimate 不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！