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

发布时间：2020-12-17 10:22:42 所属栏目：安全来源：网络整理

导读：我需要使用ui-view根据当前状态应用不同的动画.继 this question..之后我有以下代码(编辑：见plunker preview) section ui-view ng-class="stateClass"/section stateClass应用于每个控制器,例如： .controller('loginController',function($scope,$state)

我需要使用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);

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

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

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

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

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

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

添加到您的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进行转换的状态).对于即将消失的元素,状态保持与之前创建的相同.

例如：

从主状态到模态状态的转换：

阶段1：主要状态是活动的：

<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：模态状态是活动的

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!