angularjs - 将多个 ui-view 动画化为一个的最佳实践

Question

我有一个基本上看起来像这样的应用程序

<div ui-view="header">
<div ui-view="main">
<div ui-view="footer">

现在，对于应用程序的所有不同状态，页脚将保持不变，但页眉会在某些状态下发生变化，但也会在很多状态下共享内容。唯一的 ui-view将在所有州发生变化的是 ui-view="main" .

目前我的 $stateProvider看起来像这样(页脚尚未实现):

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  $stateProvider.state('root',{
      url: '',
      abstract: true,
      views: {
        'header': {
          templateUrl: appHelper.views+'/header.html',
        },
      }
    })
    .state('root.home', {
      url: '/',
      views: {
        'header': {
          templateUrl: appHelper.views+'/header.html',
        },
        'main@': {
          templateUrl: appHelper.views+'/home.html',
          controller: 'HomeController as homeVm',
        }
      },
      resolve: {
        posts: function(dataService) {
          return dataService.getPosts();
        },
        artists: function(dataService) {
          return dataService.getArtists();
        }
      }
    })
    .state('root.artist', {
      url: '/artist/:slug',
      views: {
        'header@': {
          templateUrl: appHelper.views+'/artistHeader.html',
          controller: 'ArtistController as artistVm',
        },
        'main@': {
          templateUrl: appHelper.views+'/artist.html',
          controller: 'ArtistController as artistVm',
        }
      },
      resolve: {
        artist: function($stateParams, dataService) {
          return dataService.getArtist($stateParams.slug);    
        }
      }
    });
}]);

到现在为止还挺好。但这就是问题所在。在过渡期间，我想为所有 ui-view 设置动画。 s 作为一个。为了让我的情况看起来有凝聚力(这是一个淡入淡出动画)，我想把它们放在一个包装 div 中并让该 div 淡出/淡入(在每个不同的 ui-view 上执行它会导致各种丑陋)。

在这种情况下，最佳做法是什么？

我是否将它们包装在 ui-view 中？并将其连接到 $stateProvider不知何故(嵌套 ui-view s？)。
还有其他方法吗？可以听吗 $stateChange并将类应用于我的包装器，如 ngAnimate将与 ui-view ? (淡出然后等到完全淡出并成功解决后再淡入)。

从我的谷歌搜索看来 ui-view在处理过渡类型的动画时是首选。

Answer 1

... During transitions I want to animate all the ui-views as one. To makethings look cohesive in my case (it’s a fade animation) I would liketo put them in a wrapping div and have that div do the fade out/fadein (doing it on each different ui-view will cause all kinds ofuglyness).

What is best practice in this scenario?

选项 1:使用事件 Hook $stateChangeStart和 $stateChangeSuccess正如@David 在评论中提到的那样，这种方法会产生一些副作用。所以避免它直到 ui-router提出了一种更好的方法来管理状态转换 promise 。目前它依赖于 event.preventDefault()以防止发生过渡。
基本上， ui-router将解雇你的 ui-view路线更改 View 与传入 View 同时。所以你得到的是以前的 ui-view在下一个 ui-view 时仍然可见被渲染，如果你正在为 View 设置动画，那么旧 View 和新 View 之间会有重叠的过渡持续时间。您应该考虑推迟渲染新的 ui View ，直到旧的动画完成(在动画新的动画之前)
出于类似的原因，将它们包装在另一个 ui-view 中并将它们连接到 $stateProvider不会是明智的。
选项 2: (推荐)基于 CSS 的动画
我主要使用基于 CSS 的转换，你可以通过

为每个 ui-view 分配一个公共(public) CSS 类并在该类上应用动画。

或附上三个ui-view在 <div> (如果你真的需要这个)并在其上应用动画。

无论哪种方式，您都会处理所有 ui-views作为一个单一的实体并对其进行动画处理会使事情看起来更具凝聚力。
HTML:

<div ui-view="header" ></div>    
<div ui-view="main" ></div>
<div ui-view="footer" ></div>

CSS:

[ui-view].ng-enter { 
   animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

这是一个有效的 plunkr根据您的用例，我有一个抽象状态 root和三个嵌套状态 root.home , root.artist和 root.band .而 ui-view='main'在所有州都发生变化， ui-view='footer'没有任何变化， ui-view='header'状态“root.artist”的更改。
您使用基于 css 的事实 .ng-enter和 .ng-leave类来触发动画，您在技术上克服了以前方法的问题。

  $stateProvider
        .state('root',{
          abstract:true,
            views:{
              'header':{  //absolutely targets the 'header' view in root unnamed state.
                templateUrl:'header.html'
              },
              'footer':{  //absolutely targets the 'footer' view in root unnamed state.
                templateUrl:'footer.html'
              }
            }
        })
        .state('root.home',{
            views:{
              'main@':{
                templateUrl:'main.html'
              },
            }          
        })
        .state('root.artist',{
            views:{
              'header@':{
                templateUrl:'artist-header.html'
              },
              'main@':{
                templateUrl:'artist-main.html'
              },
            }          
        })
        .state('root.band',{
            views:{
              'main@':{
                templateUrl:'band-main.html'
              },
            }          
        })