ngAnimate angularjs and bootstrap - angularjs

Question

I do an app with Angularjs and ui.Bootstrap
I use a $routeProvider so I have an <ng-view></ng-view> in my main page,
with animate.css, I want to animate enter and leave of my view, but bootstrap doesn't had both class ( .myclass-enter and .myclass-leave )
I don't know why?

Answer 1

This is not responsibility of Bootstrap to animate ng-view element. But you can easily achieve this with ngAnimate module (remember to inject it into your main app module). All you need to do is to implement couple of classes.
For example to make view slide you can write this classess:
<div ng-view class="slide"></div>
and CSS:
.slide {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.slide.ng-enter,
.slide.ng-leave {
transition: all 1s ease;
}
.slide.ng-enter {
left: 100%;
}
.slide.ng-enter-active,
.slide.ng-leave {
left: 0;
}
.slide.ng-leave-active {
left: -100%;
}
Here is some examples I put together of this approach.

Answer 2

thinx I think I forget vendor prefix on my css class, so it works with animate.css now
.slide.ng-enter,
.slide.ng-leave {
}
.slide.ng-enter {
animation-delay: 1s;
}
.slide.ng-enter-active {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
.slide.ng-leave {
}
.slide.ng-leave-active {
-webkit-animation-name: hinge;
animation-name: hinge;
}