angularjs - 具有动态类 1.2rc1 的 ngAnimate

Question

新的 ngAnimate 使用硬编码类：

<div ng-view class="forward"></div>

.forward.ng-enter {
  -webkit-animation: from_right 10s ease;
}

但不是动态类：

<div ng-view ng-class="{'forward': true}"></div>

如何在进入和退出动画之间动态切换（例如在电话向导中前进和后退）？

Answer 1

我确实花了五个小时试图弄清楚这个完全相同的问题，因为我正在尝试做完全相同的事情。原来，这是 rc1 中的一个错误。这是拉取请求，现在在 rc2 中。

基本上，ngAnimate 在类被解释之前就已经运行了，但现在它已经修复了。您的示例现在应该可以工作：

<div ng-view ng-class="{ 'foo': bar }"></div>

或者，您可以只使用常规类属性，并将其绑定到不同控制器模型中的某个字符串（如果每个视图都有单独的控制器，例如在路由时），如下所示：

<div ng-view class="foo"></div>

然后，在您的 javascript 中，执行以下操作：

angular.module('app', []);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/one', { templateUrl: '/one.html', controller: 'viewOneCtrl' })
        .when('/two', { templateUrl: '/two.html', controller: 'viewTwoCtrl' });
}]);

app.controller('viewOneCtrl', ['$scope', function($scope) {
    $scope.foo = 'view-one';
}]);

app.controller('viewTwoCtrl', ['$scope', function($scope) {
    $scope.foo = 'view-two';
}]);