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

问题描述

我是新来使用带有AngularJS 1.2 NG-动画。我不知道为什么我的NG-动画不起作用某一类的名称，但是默认的，我在一个例子中看到一个简单的淡入淡出的作品。

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-动画类是'动画'：
<一href=\"http://plnkr.co/edit/QWQUUVdcLmzLKRvVibqN?p=$p$pview\">http://plnkr.co/edit/QWQUUVdcLmzLKRvVibqN?p=$p$pview

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

但是当我使用默认值，我的动画类的名称只是.ng输入和.ng休假，在动画淡出似乎做工精细。

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.

<一个href=\"http://plnkr.co/edit/lEQhMwd6RWmsdmJbosu0?p=$p$pview\">http://plnkr.co/edit/lEQhMwd6RWmsdmJbosu0?p=$p$pview

任何帮助将大大AP preciated，谢谢！

Any help would be greatly appreciated, thanks!

推荐答案

在NG-动画属性德precated 1.2。

The ng-animate attribute is deprecated in 1.2.

在1.2定义使用一个特殊的命名约定相应的CSS类。如果你想要像'动画'一个特定的名称，你需要的那类添加到要设置动画的元素。

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进入类的原因。这将自动但是动画支持动画输入所有指令。

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.

我已经更新您的第一个例子，使其与命名工作类动画：

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=$p$pview

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