Angularjs 角度UI路由器设置嵌套视图的动画

我一直在尝试解决如何使用ui路由器制作嵌套视图的动画。但所有的尝试都失败了。我想做的是在名为

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>

---

同样，我所要做的就是将新内容淡入“正文”并淡出旧内容。

你能在Plunker中复制这个问题吗？