javascript - Angular ng-switch を複数の方法でアニメート (入力/終了) させる方法は?

Question

「cardViewer」と呼ばれるAngularディレクティブを作成します。これは、その中の画像をアニメーションで表示できます。

「前へ」ボタンを押すと、画像が左にスライドします。「次へ」ボタンを押すと、画像が右にスライドします。

アニメーション クラスのみをng-switchサポートする でこれを実行しようとしています。しかし、入るには2つの方法（左右から入る）、出るには2つの方法（左右に離れる）が必要です。.ng-enter.ng-leave

だから私はng-classこの問題を解決しようとします。toLeft切り替える前にクラスを追加して、特定のcssアニメーションを適用できることを願っています。

しかし、それは正しく機能していないようです。「次へ」ボタンを2回押すと、うまくいきます。しかし、「次へ」を押してから「前へ」を押すと、新しい画像は正しい方向に入力されますが、古い画像は間違った方向に残ります。

私のディレクティブ テンプレート:

<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 を複数の方法で出入りさせる正しい方法は何ですか?