小编Opa*_*ass的帖子

我写了一个名为'cardViewer'的角度指令,它可以用动画显示其中的图像.

按"上一步"按钮时,图像向左滑动.按"下一步"按钮时,图像向右滑动.

我尝试这样做ng-switch,只支持.ng-enter和.ng-leave动画类.但是我需要两种方式进入(从左和右进入),两种方式离开(左和右).

所以我试着ng-class解决这个问题.我希望它可以toLeft在切换之前添加类,因此它可以应用特定的css动画.

但它似乎无法正常工作.当我按两次"下一步"按钮时,它工作正常.但是当我按下"下一步",然后按"上一步",新图像进入正确方向,但旧图像离开方向错误.

我的指令模板:

<h1>hahaha</h1>
  <div>
    <button ng-click='prev()'>prev</button>
    <button ng-click='next()'>next</button>
  </div>
<div>current Card Index: {{displayCard}}</div>

<div class="card-container" ng-switch="displayCard">
<img class="card"
   src="http://i.imgur.com/EJRdIcf.jpg" ng-switch-when="1" 
   ng-class="{'toLeft': toLeft, 'toRight': toRight}"/>
<img class="card"
   src="http://i.imgur.com/StaoX5y.jpg" ng-switch-when="2" 
   ng-class="{'toLeft': toLeft, 'toRight': toRight}"/>
<img class="card"
   src="http://i.imgur.com/eNcDvLE.jpg" ng-switch-when="3" 
   ng-class="{'toLeft': toLeft, 'toRight': toRight}"/>
</div>

指示:

angular.module('app', ['ngAnimate'])
  .directive('cardViewer', function() {

  return {
    templateUrl: 'cardViewer.html',
    link: function(scope, element, attr) {
      scope.toLeft = false;
      scope.toRight = false;

      scope.displayCard = 1;

      //when …