Question

在过去的几个月里，我每隔一段时间就对在应用程序中实现ngAnimate感到非常兴奋，而且每次我都被我无法做到的事实压垮了。

有趣的是，文档非常直接，所以我知道可能有一些非常明显的东西让我感到沮丧。

例如，当尝试通过ngRepeated元素数组进行分页时，我似乎无法获得fade动画。看看：

HTML

重复元素

<div ng-repeat="image in images" ng-hide="image.hidden">
    <canvas ng-mouseover="getCoordinates($event)" id="{{image.name}}" ng-hide="image.hidden" class="fade"></canvas>
</div>

分页程序

<tr>
    <td><input ng-model="coordinates.x"></td>
    <td><input ng-model="coordinates.y"></td>
    <td><i type="button" ng-click="page(left)" class="fa fa-arrow-left"></i></td>
    <td><i type="button" ng-click="page(right)" class="fa fa-arrow-right"></i></td>
</tr>

CSS

/* The starting CSS styles for the enter animation */
.fade.ng-enter {
  transition:0.5s linear all;
  opacity:0;
}

/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
  opacity:1;
}

我也试过这个：

.ng-enter {
    transistion: 0.5s linear all;
    opacity: 0;
};
.ng-enter-active {
    transition: 0.5s linear all;
    opacity: 1;
};
.ng-leave {
    transition: 1s linear all;
    opacity: 1;
};
.ng-leave-active {
    transition: 0.5s linear all;
    opacity: 0;
};

为了使这篇文章更加简洁，我将放弃javascript的东西，但让分页的作用就足够了。

现在，从我的角度来看，问题似乎是Angular.js（1.4.7）在隐藏/显示时没有添加ng-enter等。这可能是什么原因？

This帖子建议我降级我的Angular.js版本，但我不打算这样做。我相信动画应该适用于最新版本，我只需要弄清楚如何。

Answer 1

我倾向于使用animate.css库，因为大多数基本动画都是在那里定义的。此外，请务必在角度应用程序中将ngAnimate模块作为依赖模块加载。

您可以在应用样式表中使用动画库类来定义ng-enter，ng-move，ng-leave等所发生的事情。

.animation.ng-enter, .ng-move {
   -webkit-animation: fadeInRight 1s;
   -moz-animation: fadeInRight 1s;
   -ms-animation: fadeInRight 1s;
   -o-animation: fadeInRight 1s;
   animation: fadeInRight 1s;
}

.animation.ng-leave {
   -webkit-animation: fadeOutRight 1s;
   -moz-animation: fadeOutRight 1s;
   -ms-animation: fadeOutRight 1s;
   -o-animation: fadeOutRight 1s;
   animation: fadeOutRight 1s;
}

然后在使用ng-repeat的元素上，将css与.animate类一起应用。

    <input type="text" ng-model="filter"/>
    <div class="animation animated" ng-repeat="item in [1,2,3,4,5,6,7] | filter: filter">
      <div class="box">
        <h1>{{item}}</h1>
      </div>
    </div>

这是一个简单的工作example

Answer 2

我相信您正在寻找的课程为.foo.ng-enter，.foo.ng-enter-stagger为ngAnimate。这些是ngAnimate要求您使用的类。

您使用.foo.ng-enter表示动画，.foo.ng-enter-stagger表示延迟。 E.g。

.foo.ng-enter {
    -webkit-animation: fadeInLeft 1s;
    animation: fadeInLeft 1s;
}  

.foo.ng-enter-stagger {
  -webkit-animation-delay:200ms;
  animation-delay:200ms;

  /* override to make sure it's not inherited from other styles */
  -webkit-animation-duration:0;
  animation-duration:0;
}

我总是遇到麻烦，直到我偶然发现this site，这解释了Anonic CSS和使用离子项目的ngAnimate。

如何在ngRepeat-ed元素上使用ngAnimate？

2 个答案: