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

Posted 2023-03-06

【中文标题】如何在 ngRepeat-ed 元素上使用 ngAnimate？

【英文标题】：How to Use ngAnimate on ngRepeat-ed element?

【发布时间】：2016-02-14 12:26:53

【问题描述】：

在过去的几个月里，我时不时地对在应用程序中实现 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 版本，但我不会这样做。我相信动画应该可以在最新版本上运行，我只需要弄清楚如何。

【参考方案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

【讨论】：

那么，您是说 ngAnimate 必须与 animate.css 一起使用吗？

可以是也可以自己定义过渡效果。我倾向于使用它，因为大多数效果都是在类中定义的。正如您在演示中看到的那样daneden.github.io/animate.css

【参考方案2】：

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

您将.foo.ng-enter 用于动画，.foo.ng-enter-stagger 用于延迟。例如

.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 之前，我一直对此感到困惑，它解释了 Animate CSS 和 ngAnimate 与 Ionic 项目一起使用。