javascript - 在进入或离开 AngularJS 状态时更改 CSS 属性

Question

我有一个应用程序，我想在进入/退出 Angular 状态时更改 CSS 属性。我的 CSS 属性在 html 和 body 元素(基本上是背景)上是背景色，在状态转换时会暴露出来。我想更改该背景的颜色以使过渡看起来更好一些。对我如何在 Angular 中做到这一点有什么建议吗？

Answer 1

ui-router 的 $state 服务在状态改变时在 $rootscope 上广播事件。您可以收听这些事件并相应地应用您的样式更改。以下内容会导致您的 body 在状态转换期间具有红色背景，而在之后具有白色背景:

angular.module('myApp').run(function($rootScope){
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
        //change body background 
        document.body.style.background = 'red';
    });
    $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
        //reset body background
        document.body.style.background = 'white';
    });
});

ui-router $state docs