lundi 20 avril 2015

ngAnimate not adding classes to image gallery using ngRepeat

Demo: http://ift.tt/1D8HBCb

I'm attempting to make my image gallery animate when you hit the left/right arrows. Ideally, they would work like they do here.

I tried doing this:

.gallery-image {

    opacity: 1;

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

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

But it just seems like ngAnimate doesn't want to add any classes to my elements on the DOM. My repeater is declared like this:

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

So what I do is just change the current index I'm looking at, and that adjusts what images are visible.

The weird thing is, if you resize the plunk (sm to md, md to lg) you can see the images very clearly animating.

Why isn't ngAnimate adding any classes to my DOM?

Aucun commentaire:

Enregistrer un commentaire