如何以多种方式制作Angular ng-switch动画(进入/离开)？

Question

我写了一个名为'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 press prev, card slide to left
      scope.prev = function() {
        scope.toLeft = true;
        scope.toRight = false;
        if (scope.displayCard == 1) {
          scope.displayCard = 3
        } else {
          scope.displayCard -= 1;
        }
      };

      //when press prev, card slide to right
      scope.next = function() {
        scope.toLeft = false;
        scope.toRight = true;

        if (scope.displayCard == 3) {
          scope.displayCard = 1
        } else {
          scope.displayCard += 1;
        }
      };
    }
  }
});

CSS:

.card-container {
  position: relative;
  height: 500px;
  overflow: hidden;
}
.card {
  width: 100%;
  position: absolute;
}

.card.ng-animate {
  transition: 1s linear all;
}

.card.ng-enter.toLeft {
  left: 100%;
}
.card.ng-enter-active.toLeft {
  left: 0;
}
.card.ng-leave.toLeft {
  left: 0;
}
.card.ng-leave-active.toLeft {
  left: -100%;
}

.card.ng-enter.toRight {
  left: -100%;
}

.card.ng-enter-active.toRight {
  left: 0;
}

.card.ng-leave.toRight {
  left: 0;
}

.card.ng-leave-active.toRight {
  left: 100%;
}

这是我的plunker:cardViewer

我的代码出了什么问题？使ng-switch以多种方式进入/离开的正确方法是什么？

Answer 1

问题是,在动画开始ngSwitch之前ngClass有机会执行并将图像的类更改toRight为toLeft(反之亦然)之前,会破坏当前图像的范围.

ngSwitch创建新范围并在优先级1200 执行,而ngClass在优先级0执行.

要使其工作,您只需要更新您的next和prev方法,以便他们displayCard在a $timeout,after toLeft和toRightset中设置属性,因此ngClass有机会在销毁该范围之前对新toLeft/ toRight设置进行操作ngSwitch.

所以你的next方法,例如,看起来像这样:

scope.next = function() {
  scope.toLeft = false;
  scope.toRight = true;

  // need to do this in a $timeout so ngClass has 
  // chance to update the current image's class based 
  // on the new toLeft and toRight settings before
  // ngSwitch acts on the new displayCard setting
  // and destroys the current images's scope.
  $timeout(function () {
    if (scope.displayCard == 3) {
      scope.displayCard = 1
    } else {
      scope.displayCard += 1;
    }
  }, 0);
};

这是你的插图显示它工作的叉子.打开控制台以查看ngClass添加类和ngSwitch销毁时的日志消息并创建范围.

我在那里留下了原来的"next"和"prev"按钮,只添加了"next(fixed)"和"prev(fixed)"按钮,这样您就可以比较日志消息,看看如何使用原始按钮ngSwitch破坏范围之前ngClass执行,而在修复版本ngClass执行之前,ngSwitch销毁范围.