Question

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

我想要发生的是当从slide1调用proceed（）函数时，slide2从右向左滑入，它正确地执行，但是当通过单击Back按钮调用backToOne函数时幻灯片2，slide2应滑向右侧。

实际发生的是当调用backToOne（）函数时，slide2向左滑动。任何帮助表示赞赏。我对角度很新，所以我想弄清楚我需要做什么来更新那个类，然后改变导致动画发生的属性值。

提前致谢。

这是（简化）视图：

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

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

Answer 1

试试这个：

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

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

AngularJS动画计时问题

1 个答案: