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中的一个错误。 Here's the pull request，现在位于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';
}]);

动态类1.2rc1的ngAnimate

1 个答案: