将状态类应用于ui-view以允许不同的动画

Question

我需要根据当前状态使用不同的动画ui-view.继这个问题..

我有以下代码(编辑:请参阅plunker预览)

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

stateClass 在每个控制器中应用,例如:

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

这很有效,而且课程也很好 - 但是动画不会开始.

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

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

与硬编码类,这工作(但现在我不能应用不同的动画).

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

编辑>>奇怪的足够的ng-leave动画工作正常.但是css仍然不适用ng-enter

Answer 1

将以下指令添加到您的 ui-view 中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-view 转换到的状态）。对于即将消失的元素，其状态保持与之前创建时相同。

例如：

main从到状态的转换modal：

第 1 阶段：main状态激活：

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

第二阶段：运行$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>

第三阶段：modal状态活跃

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