NG-重复动画不工作 [英] ng-repeat animation not working

查看:179
本文介绍了NG-重复动画不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我和NG-重复的动画似乎并没有工作。这里是plunkr

My animation with ng-repeat does not seem to work . Here is the plunkr

http://plnkr.co/edit/kYtzM9d0rzGmrniybz9c?p=$p$ PVIEW

任何输入。

推荐答案

1 您已经注册了两个模块:

1. You have registered two modules:

<html ng-app="plunker">

<body ng-app="testApp">

删除 NG-应用从HTML标记。

2 您需要加载角animate.js

3。当你在阵列内移动的元素,它既不输入离开你应该使用,而是移动 .ng-MOVE {

3. As you are moving the elements within the array, it's neither enter or leave you should use, but instead move: .ng-move {

4。您使用的是 NG-动画指令( NG-动画='动画'),这是自1.2 pcated德$ p $。您还向它传递了一个不存在的一类。

4. You are using the ng-animate directive (ng-animate="'animate'") which is deprecated since 1.2. You are also passing it a class that does not exist.

这将工作:

.ng-move {
  transition: 1.75s;
  opacity: 0;
}
.ng-move.ng-move-active {
  opacity: 1;
}

不过,我会建议给它一个特定的类,以便能够指定NG重复使用其动画:

But I would recommend giving it a specific class to be able to specify which ng-repeat uses which animation:

.move-animation.ng-move {
  transition: 1.75s;
  opacity: 0;
}
.move-animation.ng-move.ng-move-active {
  opacity: 1;
}

<td class="move-animation" ng-repeat="cust in customers" ng-click="swap(this.$index)">

演示: http://plnkr.co/edit/fiMORm5ZFLejV1aOUrbR?p=$p$pview

这篇关于NG-重复动画不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆