I have an ng-view in a boostrap container class
<div class="container">
<div ng-view class="fade-animation"></div>
</div>
The fade-animation is defined as
fade-animation.ng-enter, .fade-animation.ng-leave {
-webkit-transition: 0.5s linear all;
-moz-transition: 0.5s linear all;
-o-transition: 0.5s linear all;
transition: 0.5s linear all;
position: fixed;
}
.fade-animation.ng-enter {
transition-delay: 0.5s;
opacity: 0;
}
.fade-animation.ng-enter.ng-enter-active {
opacity: 1;
}
.fade-animation.ng-leave {
opacity: 1;
}
.fade-animation.ng-leave.ng-leave-active {
opacity: 0;
}
Everything is working well as I navigate through my routes, i.e. the
correct controllers and templates are being loaded and the UI is fading in
and out as I'd expect, until I start adding bootstrap layout elements, e.g.
a row. All layout elements seem to fade in then up-shift a couple pixels at
the end of the animation. I suspect this has to do with the fluid layout
rendering bootstrap performs but I'm not exactly sure how to work around
the issue.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
