我需要根据的当前状态应用不同的动画ui-view。接下来是这个问题。
我有以下代码（编辑：请参阅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-class被添加ng-enter吗？有人可以建议如何实现动画吗？
编辑>>奇怪的是，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视图转换到的状态）。对于将要消失的元素，状态保持与之前创建的状态相同。
例如：
从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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句