将状态 class 应用到 ui-view 以允许不同的 ng 动画

Question

我需要使用 ui-view 根据当前状态应用不同的动画。继 this question..

我有以下代码（编辑：见plunker preview）

<section ui-view ng-class="stateClass"></section>

stateClass 应用于每个控制器，例如：

.controller('loginController', function($scope, $state) {
  // Set state class name
  $scope.stateClass = 'slide-left';
  console.log($scope);

这有效，class 添加得很好 - 但动画不会启动。

如果我要将 ui-view 代码更新为：

<section ui-view class="slide-left"></section>

使用 class 硬编码，这有效（但现在我不能应用不同的动画）。

是否在 ng-enter 之后添加了 ng-class？有人可以建议如何实现动画吗？

edit>> 奇怪的是 ng-leave 动画效果很好。但是 css 仍然不适用于 ng-enter

Answer 1

添加到您的 ui- 查看以下指令 state-class:

.directive('stateClass', ['$state', function($state) {
    return {
        link: function($scope, $element, $attrs) {
            var stateName = $state.current.name || 'init',
                normalizedStateName = 'state-' + stateName.replace(/\./g, '-');
            $element.addClass(normalizedStateName);
        }
    }
}]);

在 ng-enter 上，对于新创建的元素，它将添加当前状态名称（ui-视图转换到的状态）。对于将要消失的元素，其状态与之前创建的一样。

例如：

从main到modal状态的转变：

第 1 阶段：main 状态处于活动状态：

<ui-view state-class class="state-main ng-scope"></ui-view>

第 2 阶段：运行$state.go('modal');

<ui-view state-class class="state-modal ng-animate ng-enter ng-enter-active"></ui-view>
<ui-view state-class class="state-main ng-animate ng-leave ng-leave-active"></ui-view>

阶段 3：modal 状态处于活动状态

<ui-view state-class class="state-modal"></ui-view>

将状态 class 应用到 ui-view 以允许不同的 ng 动画

Apply a state class to ui-view to allow different ng animation

angularjs

ng-animate

angular-ui-router