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

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 来看，问题似乎在于 Angular.js (1.4.7) 没有在隐藏/显示时添加 ng-enter 等类。这可能是什么原因？

This帖子建议我降级我的 Angular.js 版本，但我不会那样做。我相信动画应该在最新版本上运行，我只需要弄清楚如何。

Answer 1

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

您可以在应用样式表中使用动画库类来定义在 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