Simple forward and backward CSS animation with Angular ngAnimateSwap directive

Question

I have made a simple swap animation with ng-animate-swap directive, nothing fancy. It works well in forward direction, but fails animating backwards correctly.

The problem is, that the entering slide will not be visible before animation ends.
Check an example in Plunker.

Here is the controller code:

var elem = document.querySelector('.wrap');
var $elem = angular.element(elem);

var slides = [
  { color: "#f00" },
  { color: "#0f0" },
  { color: "#00f" },
];

var current = 0;
$scope.slide = slides[ current ];

// switch to next slide
$scope.nextSlide = function(){
  $elem.removeClass('animate-back');
  if(slides.length <= ++current){
    current = 0;
  }
  $scope.slide = slides[ current ];
};

// switch to prev slide
$scope.prevSlide = function(){
  $elem.addClass('animate-back');
  if(--current<0){
    current = slides.length-1;
  }
  $scope.slide = slides[ current ];
};

the HTML:

  <div class="wrap" ng-controller="AppCtrl">
    <div class="container">
      <div ng-animate-swap="slide" class="slide" ng-style="{background:slide.color}"></div>
    </div>
    <button ng-click="prevSlide()">Previous Slide</button>
    <button ng-click="nextSlide()">Next Slide</button>
  </div>

the CSS:

.slide.ng-enter-active,
.slide.ng-leave {
  transform: translate(0,0);
}

// forward
.slide.ng-enter {
  transform: translate(0,-100%);
}
.slide.ng-leave-active {
  transform: translate(0,100%);
}

// backward
.animate-back .slide.ng-enter {
  transform: translate(0,100%);
}
.animate-back .slide.ng-leave-active {
  transform: translate(0,-100%);
}

I think it's simple CSS issue, but can not wrap my head around it.
What am I missing here?

Johnny Welker · Accepted Answer · 2016-03-03T19:23:01.957

2

You're right! The problem was the css. The direction was missing for the incoming slide. ".animate-back .slide.ng-enter-active" This should work.

.animate-back .slide.ng-enter {
  transform: translate(0,100%);
}
.animate-back .slide.ng-enter-active {
transform: translate(0,0);
}
.animate-back .slide.ng-leave-active {
transform: translate(0,-100%);
}

Updated Plunker: http://plnkr.co/edit/Uze8e8DmmjlaSqEeBELe?p=preview

edited Mar 03 '16 at 19:23

answered Mar 03 '16 at 17:38

Johnny Welker

104
1
7

I don't see how this solves it. It just makes prevSlide move same direction as nextSlide. The whole idea is to animate other direction. With your solution, both next and prev move same direction or just opposite if you change nextSlide to have addClass, but problem remains. – ruuter Mar 03 '16 at 17:47

Simple forward and backward CSS animation with Angular ngAnimateSwap directive

1 Answers1