AngularJS 1.2 – ngAnimate不工作

发布时间：2020-12-17 08:03:21 所属栏目：安全来源：网络整理

导读：我是AngularJS 1.2使用ng-animate的新手。我不确定为什么我的ng-animate不能使用某个类名，而是使用默认值进行简单淡入淡出，这是我在一个例子中看到的。在这个例子中，我尝试将我的ng-animate类设置为’animation’： http://plnkr.co/edit/QWQUUVdcLmzLKR

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

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

但是当我使用默认设置时，我的动画类名称只是“.ng-enter”和“.ng-leave”，动画中的淡入淡出似乎工作正常。

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

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

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

在1.2中，您使用特殊的命名约定定义适当的CSS类。如果您想要一个特定的名称，例如“animation”，则需要将该类添加到要设置动画的元素中。

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

这就是在定义“.ng-enter”类时，动画在第二个示例中工作的原因。但是，这会自动为支持输入动画的所有指令设置动画。

我已经更新了你的第一个例子，使它适用于名为’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=preview

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!