ngAnimate не добавлять классов в галерею изображений с использованием ngRepeat

Question

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

Так что я просто изменить текущий индекс Я смотрю, и что регулирует, какие изображения являются видимыми.

Странно, если вы изменяете размер плунжера (см. Md, md to lg), вы можете видеть изображения очень четко анимированными.

Почему нет ngAnimate добавления каких-либо классов в мой DOM?

Answer 1

Кажется, что ngAnimate будет не ничего не делать, если вы фактически не изменяете базовый массив. Решение здесь состоит в том, чтобы сохранить список «видимых» элементов и изменить это, вместо того, чтобы выделять все из текущего видимого индекса.