Question

我使用AngularJS处理多阶段网络表单，如下例所示：

当您单击“下一步”按钮时，表单向右滑动，但是当您单击“返回”按钮时，表单不会向左滑动，我需要更改“ng-animate”css时点击“后退”按钮。

我应该如何做到这一点？

谢谢！

Answer 1

在您的控制器中，您可以设置一个确定动画方向的变量。所以像这样（伪代码）：

$scope.update = function() {
   $scope.direction = 1;
}

$scope.backTo = function() {
   $scope.direction = 0;
}

在你的HTML中，你会围绕动画区域：

<div ng-class="{forward: direction, backward: !direction}">
   your animated stuff here
</div>

现在只需设置你的css规则：

.forward .animate-switch.ng-leave{  
  left:0;
}
/* hide */
.forward  .animate-switch.ng-leave.ng-leave-active{ 
  left:-100%;
}
/* show entering slide  */
/* hide */
.forward .animate-switch.ng-enter {
  left:100%;
}
/* show */
.forward .animate-switch.ng-enter.ng-enter-active { 
  left:0;
}

.backward  animate-switch.ng-leave{  
  /* etc */
}

以下是代码笔中的演示：http://codepen.io/sbosell/pen/rKJal

AngularJS：即时更改ng-animate css

1 个答案: