我需要使用 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-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 转换到的状态)。对于将要消失的元素,状态与之前创建的状态相同。
例如:
从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>