Question

当我从一个状态转换到另一个状态时，一些转换看起来非常快。是否有一种简单的方法可以让我的屏幕转换为淡出和淡入。我不会想到即使0.2秒和0.2秒也没关系。

我很欣赏一些关于从哪里开始寻找以及如何做到这一点的建议。

Answer 1

Angular ui-router在更改状态时会提供一些事件，例如：

$ stateChangeStart
$ stateChangeSuccess等。

$ rootScope。$ on（＆＃39; $ stateChangeStart＆＃39;，

function(event, toState, toParams, fromState, fromParams, options){ 
    event.preventDefault(); 
    // transitionTo() promise will be rejected with 
    // a 'transition prevented' error
});

或

$rootScope.$on('$stateChangeSuccess', 
function(event, toState, toParams, fromState, fromParams){ ... })

我建议您使用'$stateChangeSuccess'并添加$ timeout或任何其他动画，以便从一个州消失到另一个州。

有关更多信息，请参阅以下链接： State Change events in angular ui-router 希望这会有所帮助。

Answer 2

直接Frequently Asked Questions上的UI-Router wiki：

How to: Animate ui-view with ng-animate

当您添加angular-animate javascript资源时，UI-Router会自动将ng-enter，ng-enter-active，ng-leave和ng-leave-active类添加到状态更改UI中 - 视图。您可以使用它们附加您自己的CSS动画：

CSS：

[ui-view].ng-enter, [ui-view].ng-leave {
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
}

[ui-view].ng-enter {
  opacity: 0;
}

[ui-view].ng-enter-active {
  opacity: 1;
}

[ui-view].ng-leave {
  opacity: 1;
}

[ui-view].ng-leave-active {
  opacity: 0;
}

以下是关于Plunker的示例：http://plnkr.co/edit/nx2enw?p=preview

有没有一种方法可以使用AngularJS和ui-router从一个屏幕淡入另一个屏幕

2 个答案: