In the current setup, p2 animates in while p1 is still animating out. After that, p1 disappears and p2 glitches up the page. The desired effect is for 1 to fade out and then have 2 fade in.
html:
<nav>
<a ng-click="changeView('p1')">p1</a>
<a ng-click="changeView('p2')">p2</a>
</nav>
<div ng-view class="page">
</div>
css:
.page {
border:1px solid red;
background-color:#eee;
transition:all 1s linear;
}
.page.ng-enter {
-webkit-opacity:0;
opacity:0;
}
.page.ng-enter-active {
-webkit-opacity:1;
opacity:1;
}
.page.ng-leave {
-webkit-opacity:0;
opacity:0;
}
.page.ng-leave-active {
-webkit-opacity:1;
opacity:1;
}
Is there a conventional method to achieve this? I've attempted using ng-enter-stagger as suggested by yearofmoo but haven't had any success.