如何以不止一种方式制作 Angular ng-switch 动画（enter/leave）？

Question

我写了一个 angular 指令，叫做 'cardViewer'，它可以用动画显示里面的图像。

当您按下 "prev" 按钮时，图像向左滑动。当您按下 "next" 按钮时，图像向右滑动。

我试着用 ng-switch 来做这个，它只支持 .ng-enter 和 .ng-leave 动画 class。但是我需要两种方式进入（从左和右进入），两种方式离开（从左和右离开）。

所以我尝试ng-class来解决这个问题。我希望它可以在切换之前添加 toLeft class，这样它就可以应用特定的 css 动画。

但似乎无法正常工作。当我按 "next" 按钮两次时，它工作正常。但是当我按"next"，然后按"prev"，新图像进入正确方向，但旧图像离开方向错误。

我的指令模板：

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

这是我的笨蛋：cardViewer

我的代码有什么问题？以不止一种方式制作 ng-switch enter/leave 的正确方法是什么？

Answer 1

问题是 ngSwitch 在 ngClass 有机会执行并将图像的 class 从 toRight 更改为 [ 之前破坏了当前图像的范围=14=]（反之亦然）在动画开始之前。

ngSwitch creates a new scope and executes at priority level 1200, while ngClass 以优先级 0 执行。

要使其正常工作，您只需更新 next 和 prev 方法，以便它们在 $timeout 中设置 displayCard 属性，在设置 toLeft 和 toRight 之后，因此 ngClass 有机会在 ngSwitch 销毁该范围之前对新的 toLeft/toRight 设置采取行动.

因此，例如，您的 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);
};

Here's fork your plunk 表明它工作正常。打开控制台查看 ngClass 添加您的 classes 和 ngSwitch 销毁并创建范围时的日志消息。

我把你原来的 "next" 和 "prev" 按钮留在那里，只是添加了 "next (fixed)" 和 "prev (fixed)" 按钮，这样你就可以比较日志消息，看看如何使用原始按钮，ngSwitch 在 ngClass 执行之前销毁范围，而在固定版本中 ngClass 在 ngSwitch 销毁范围之前执行。

如何以不止一种方式制作 Angular ng-switch 动画（enter/leave）？

How to make Angular ng-switch animate(enter/leave) in more than one way?

javascript

angularjs

angularjs-directive

angularjs-animation

ng-switch