AngularJS ngAnimate fadeIn用于所有ng显示和隐藏以及页面更改

Question

我想允许在我的应用程序的所有组件中应用平滑的页面更改和平滑的ng显示或隐藏。

我有此代码：

<wrapper ng-if="initialized && $root.me.type && $root.me.type!='guest'">
  <header-component></header-component>
  <div class="app-body">
    <sidebar-component></sidebar-component>
    <main class="main-content">
      <ng-view></ng-view>
    </main>
    <aside-component></aside-component>
  </div>
</wrapper>

<wrapper ng-if="initialized && $root.me.type=='guest'">
  <div class="container">
    <ng-view></ng-view>
  </div>
</wrapper>

<confirmation-modal></confirmation-modal>

注意其他一些属性中的ng-view指令。

以上所有代码都在<app></app>中的index.html内部。

这些是我要应用的动画样式：

.ng-leave {
    -webkit-animation-name: fadeOutUp;
    -moz-animation-name: fadeOutUp;
    -ms-animation-name: fadeOutUp;
    -o-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    -ms-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
    -ms-animation-timing-function: ease;
    -o-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
.ng-enter {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -ms-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -ms-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
    -ms-animation-timing-function: ease;
    -o-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden; }

怎么办？