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; } 
