Angular ng animate slider

Question

I am trying to create a slider using ng animate.

The slider works. You are able to click next and previous and get the next and previous images.

However I would like to add a transition to the element that original element that is being hidden whilst the new element comes in.

I am not able to do this and wondered if someone could spot where I am going wrong.

index.jade file...

div.gallery(ng-controller="aCtrl")        
  a.slider-prev(href="#" ng-click="prevSlide()")
  a.slider-next(href="#" ng-click="nextSlide()")    
  ul.gallery
    li(ng-repeat="image in gallery" class="gallery-animation" ng-swipe-right="prevSlide()" ng-swipe-left="nextSlide()"  ng-show="isCurrentSlideIndex($index)")          
      figure
        img.fluid(ng-src="{{imagePaths}}{{image.URL[0]}}")
        figcaption.fluid
          {{image.TITLE[0]}} : {{image.CAPTIONS[0]}}
  nav.nav
    div.wrapper
      ul.dots
        li.dot(ng-repeat="image in gallery")
          a(href="#" ng-class="{'active':isCurrentSlideIndex($index)}" ng-click="setCurrentSlideIndex($index);")

...

controller.js =

App.controller('aCtrl', function (data , imgPath, $scope) {
    data.get().then(function(d) {
        $scope.gallery = d.data.PACKAGE.ITEM[4].GALLERY[0].MEDIA;
        $scope.currentIndex = 0;
        $scope.setCurrentSlideIndex = function (index) {
          $scope.currentIndex = index;
        };
        $scope.isCurrentSlideIndex = function (index) {
          return $scope.currentIndex === index;
        };

        // setting the next and previous controls
        $scope.prevSlide = function () {
            $scope.currentIndex = ($scope.currentIndex > 0) ? --$scope.currentIndex : $scope.gallery.length - 1;
        };
        $scope.nextSlide = function () {
            $scope.currentIndex = ($scope.currentIndex < $scope.gallery.length - 1) ? ++$scope.currentIndex : 0;
        };


        $scope.imagePaths = imgPath['default'];
    })
});

...

css

.gallery-animation {
    position:absolute;
    top:0;
    left:0;

    opacity:1;

}

.gallery-animation.ng-hide-add.ng-hide-add-active {
    opacity:1;

    -webkit-transition:1s linear all;
    -moz-transition:1s linear all;
    -o-transition:1s linear all;
    transition:1s linear all;

    -webkit-transform: rotateX(50deg) rotateY(30deg);
    -moz-transform: rotateX(50deg) rotateY(30deg);
    -ms-transform: rotateX(50deg) rotateY(30deg);
    -o-transform: rotateX(50deg) rotateY(30deg);
    transform: rotateX(50deg) rotateY(30deg);

    -webkit-transform-origin: right top 0;
    -moz-transform-origin: right top 0;
    -ms-transform-origin: right top 0;
    -o-transform-origin: right top 0;
    transform-origin: right top 0;

}

.gallery-animation.ng-hide {
    opacity:0;
}

.gallery-animation.ng-hide-remove {
    -webkit-transition:1s linear all;
    -moz-transition:1s linear all;
    -o-transition:1s linear all;
    transition:1s linear all;
    display:block!important;
    opacity:0;
}

.gallery-animation, .gallery-animation.ng-hide-remove.ng-hide-remove-active {
    opacity: 1;
}

Answer 1

In your CSS you need to add a display property with a block value that shows the element that is being transitioned.

Like so

.gallery-animation.ng-hide-add, .gallery-animation.ng-hide-remove {
    /* this needs to be here to make it visible during the animation
     since the .ng-hide class is already on the element rendering
     it as hidden. */
     display:block!important;    

}

ref: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html