ngAnimate 不使用 ngRepeat 将类添加到图像库答案

【问题标题】：ngAnimate not adding classes to image gallery using ngRepeatngAnimate 不使用 ngRepeat 将类添加到图像库
【发布时间】：2015-06-27 18:05:57
【问题描述】：

演示：http://plnkr.co/edit/gehNa1s62ipRcny5Uzkj?p=preview

当您点击左/右箭头时，我正在尝试使我的图片库具有动画效果。理想情况下，他们会像 here 那样工作。

我试过这样做：

.gallery-image {

    opacity: 1;

    &.ng-enter {
      transition: transform 0.5s;
      opacity: 0;
    }

    &.ng-enter-active {
      opacity: 0.5;
    }
}

但 ngAnimate 似乎不想向 DOM 上的元素添加任何类。我的中继器是这样声明的：

    <img class="gallery-image"
      ng-repeat="image in images | limitTo:3:currentIndex-1" 
      ng-show="$index+currentIndex-1 >= 0 && $index+currentIndex-1 < images.length" 
      ng-src="{{images[$index+currentIndex-1].url}}" />

所以我所做的只是更改我正在查看的当前索引，并调整可见的图像。

奇怪的是，如果您调整 plunk 的大小（sm 到 md，md 到 lg），您可以非常清晰地看到图像动画。

为什么 ngAnimate 不向我的 DOM 添加任何类？

【问题讨论】：

标签： angularjs css ng-animate

【解决方案1】：

似乎 ngAnimate 不会做任何事情，除非您实际修改底层数组。此处的解决方案是保留“可见”项目的列表，并对其进行修改，而不是基于当前可见的索引。

【讨论】：