在进入或离开AngularJS状态时改变CSS属性

Changing CSS property on entering or leaving AngularJS state

本文关键字：改变 CSS 属性 状态 AngularJS 离开      更新时间：2023-09-26

我有一个应用程序，我想改变一个CSS属性在进入/退出角状态。我的CSS属性是background-color在html和body元素(基本上是一个背景)，暴露在状态之间的过渡。我想改变背景的颜色，使过渡看起来更好一点。有什么建议吗?

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

相关文章：