问题描述
我是新来使用带有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类,一些指令将被自动动画。哪些可以在这里找到:
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:
这篇关于AngularJS 1.2 - ngAnimate不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!