Angular UI路由器为嵌套视图设置动画

Question

我一直在尝试使用ui-router来设计如何使用嵌套视图制作动画。但所有尝试都失败了。我想要做的就是在名为body的嵌套视图中淡入淡出。我不想为标题设置动画。我让这个例子尽可能小。我认识到，如果将我的代码重新构建为不嵌套，我就不会遇到这个问题但是在生产中我需要嵌套这个问题。

这是我的scss和html。

#mainView.ng-enter {

  .nested-view-animate {
    position: absolute;
    left: 0;
    right: 0;
    -webkit-transition: all 1s ease-in-out;
  }
}

#mainView.ng-enter-active {

  .nested-view-animate {
    opacity: 1;
    -webkit-transition: all 1s ease-in-out;
  }
}

#mainView.ng-leave {

  .nested-view-animate {
    opacity: 1;
    -webkit-transition: all 1s ease-in-out;
  }
}

#mainView.ng-leave-active {

  .nested-view-animate {
    opacity: 0;
    -webkit-transition: all 1s ease-in-out;
  }
}

这是我的HTML

<div ui-view id="mainView">

   <!-- below is what is included dynamically -->
  <div>

    <div ui-view="header"></div>
    <!-- I want to animate when the content in here is loaded-->
    <div ui-view="body" class="nested-view-animate"></div>
</div>
</div>

我所要做的就是将新内容淡入“身体”并淡出旧内容。