ngAnimate angularjs and bootstrap

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?

You need to include angular-version/angular-animate.js and list ngAnimate module as dependency in your module. Those classes are added by ngAnimate module. — PSL
– PSL, Commented Jul 30, 2015 at 19:59

dfsq · Accepted Answer · 2015-07-30 20:02:35Z

3

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.

edited Jul 30, 2015 at 20:02

answered Jul 30, 2015 at 20:01

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

PSL Over a year ago

I think question may be related to ng-animate which adds those classes. OP says he is already using animate.css.

dfsq Over a year ago

Yes, of course ngAnimate is required, however you still need to implement ng-enter/leave classes, with animate.css animations or simple transitions.

PSL Over a year ago

Sure, i just commented because you seemed to have missed it in your answer initially. I was focusing on with animate.css, I want to animate enter and leave of my view, but bootstrap doesn't had both class assuming that OP has got some sample of animation classes with rules

miton18 · Accepted Answer · 2015-07-31 07:41:08Z

1

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;
}

answered Jul 31, 2015 at 7:41

miton18

2531 gold badge2 silver badges8 bronze badges

Collectives™ on Stack Overflow

ngAnimate angularjs and bootstrap

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related