I am trying to implement a slide-out effect for one view and a slide-in effect for another, but I am running into an issue where the "leave event" is not triggering properly. The old view disappears abruptly before the transition effect can be applied, while the new view slides in smoothly.
FILE = index.html
<!--Placeholder for Views-->
<div id="main" ng-view="" class="slide-animation">
</div>
FILE = app.css
/* Animations */
.slide-animation.ng-enter, .slide-animation.ng-leave {
transition: 0.5s cubic-bezier(0.420, 0.000, 1.000, 1.000) all;
}
.slide-animation.ng-enter {
left: 100%;
}
.slide-animation.ng-enter.ng-enter-active {
left: 0;
}
.slide-animation.ng-leave {
left: 0;
}
.slide-animation.ng-leave.ng-leave-active {
left: -100%;
}
Any assistance would be greatly appreciated. Thank you.