Angular UI router animate nested view - angularjs

Question

I have been trying to work out how to animate just a nested a view using ui-router. But all attempts have failed. What I am trying to do is just fade in the nested view called body I don't want to animate the header. I have made this example as small as possible. I recognize that if restructured my code to not be nested I would not have this issue but in production I need to have this nested.
here is my scss and 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;
}
}
This is my 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>
Again all I am trying to do is fade in new content into the "body" and fade out the old stuff.