ngAnimate不使用ngRepeat向图库添加类

时间:2015-04-20 20:21:25

标签: css angularjs css3 ng-animate

演示: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}}" />

所以我所做的只是改变我正在观察的当前指数,并调整可见的图像。

奇怪的是,如果你调整插件的大小(sm到md,md到lg),你可以非常清楚地看到图像的动画效果。

为什么没有任何类添加到我的DOM?

1 个答案:

答案 0 :(得分:0)

似乎除非您实际修改基础数组,否则ngAnimate将做任何事情。这里的解决方案是保留一个“可见”项列表,并对其进行修改,而不是将所有内容从当前可见索引中删除。