AngularJS动画计时问题

Question

我正在构建一个包含许多幻灯片的应用程序，并且我正在使用 Angular JS 来切换触发 CSS 动画的元素上的类。我遇到的问题是，当单击一个按钮触发角度控制器上的一个函数时，该函数会更新确定元素类的 $scope 属性，导致动画开始的属性似乎在元素旧之前更新类被删除，并分配了新的类，所以元素总是只向一个方向移动。

我想要发生的是当从slide1调用proceed()函数时，让slide2从右向左滑入，这是正确的，但是当通过单击back按钮调用backToOne函数时幻灯片 2，幻灯片 2 应该向右滑出。

实际发生的情况是，当调用 backToOne() 函数时，slide2 向左滑出。任何帮助表示赞赏。我对 Angular 很陌生，所以我试图弄清楚我需要做什么来更新该类，然后 然后 更改导致动画发生的属性值。

提前致谢。

这是（简化的）视图：

<div ng-init="switcher='one'">
    <div ng-switch="switcher" class="my-switch-container">
      <div ng-switch-when="one" id="slide1" ng-class="slide1">
        <p>stuff</p>
        <button type="button" class="btn btn-primary" ng-click="proceed()">Proceed</button>
      </div>
      <div ng-switch-when="two" id=slide2" ng-class="slide2">
        <p>more stuff</p>
        <button type="button" class="btn" ng-click="backToOne()">Back</button>
        <button type="button" class="btn btn-primary" ng-click="keepGoing()">Go</button>
      </div>
      <div ng-switch-when="three" id=slide3" ng-class="slide3">
        <p>last stuff</p>
      </div>
    </div>
  </div>

这是（再次简化的）控制器：

myApp.controller('siteCtrl', ['$scope', '$http', 'SomeData', function($scope, $http, SomeData) {
    $scope.model = SomeData;
    $scope.animateLeft = "my-switch-animation-left";
    $scope.animateRight = "my-switch-animation-right";
    $scope.slide1 = $scope.animateLeft;
    $scope.slide2 = $scope.animateLeft;
    $scope.slide3 = $scope.animateLeft;

    $scope.proceed = function() {
      $scope.switcher = "two";
      $scope.slide1 = $scope.animateRight;
    }

    $scope.backToOne = function() {
      $scope.slide2 = $scope.animateRight;
      $scope.switcher = "one";
    }

    $scope.keepGoing = function() {
      $scope.switcher = "three";
      $scope.slide2 = $scope.animateRight;
    }
}]);

这是 CSS：

.my-switch-container{
    position: relative;
}

.my-switch-animation-left, .my-switch-animation-right {
    width: 700px;
    background-color: #FFF;
    border-radius: 20px;
    border: 1px solid #000;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-box-shadow: 0 5px 15px #000;
    -moz-box-shadow: 0 5px 15px #000;
    -ms-box-shadow: 0 5px 15px #000;
    box-shadow: 0 5px 15px #000;
    margin: 0 auto;
}
.my-switch-animation-left.ng-enter, 
.my-switch-animation-left.ng-leave, 
.my-switch-animation-right.ng-enter, 
.my-switch-animation-right.ng-leave {
    -webkit-transition: 1s linear all;
    -moz-transition: 1s linear all;
    -o-transition: 1s linear all;
    -transition: 1s linear all;
    position: relative;
    top: 0px;
}
/* moving right to left */
.my-switch-animation-left.ng-enter{
    left: 100%;
}
.my-switch-animation-left.ng-leave, 
.my-switch-animation-left.ng-enter.ng-enter-active{
    left: 0;
}
.my-switch-animation-left.ng-leave.ng-leave-active{
    left: -100%;
}
/* moving left to right */
.my-switch-animation-right.ng-enter{
    right: 100%;
}
.my-switch-animation-right.ng-leave, 
.my-switch-animation-right.ng-enter.ng-enter-active{
    right: 0;
}
.my-switch-animation-right.ng-leave.ng-leave-active{
    right: -100%;
}

这是一个（粗略的）plunkr： http://plnkr.co/edit/hSUEQDkVMSdwX2nPEFly?p=info

Answer 1

试试这个：

$scope.backToOne = function() {
  $scope.slide2 = $scope.animateRight;
  $scope.$apply();
  $scope.switcher = "one";
}

在应用 ng-class 之前，摘要没有机会运行。 $apply 将强制范围重新评估。控制台上会弹出一个错误，但它可以工作。