AngularJS 1.2 View leave/enter animation?

Question!

Basically I want to slide out a view and slide in a new view, but the "leave event" is not happening at all, the old view disappears (before the leave effect) and the new view comes in with the transition effect.

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 help is appreciated, Thanks.



Answers

Try adding position: absolute; to your first css block.

By : mcrider


This video can help you solving your question :)
By: admin