使用 Angular ngAnimateSwap 指令的简单向前和向后 CSS 动画

Question

我用 ng-animate-swap directive 制作了一个简单的交换动画，没什么特别的。它在向前方向运行良好，但无法正确向后动画。

问题是，在动画结束前进入幻灯片将不可见。
检查 example in Plunker.

控制器代码如下：

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

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>

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

我认为这是一个简单的 CSS 问题，但我无法理解它。
我在这里错过了什么？

Answer 1

你说得对！问题是 css。传入幻灯片缺少方向。 “.animate-back .slide.ng-enter-active” 这应该有效。

.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%);
}

更新的 Plunker：http://plnkr.co/edit/Uze8e8DmmjlaSqEeBELe?p=preview

使用 Angular ngAnimateSwap 指令的简单向前和向后 CSS 动画

Simple forward and backward CSS animation with Angular ngAnimateSwap directive

css

css-animations

angularjs

ng-animate