Looking to add some animation to a page using Angular 1.2 and Animate.css.
Check out the Plunker here: http://plnkr.co/edit/oDiDfRCO2Msc0StNrtqH
The goal is to have the background crossfade in and the yellow menu slide in from the right.
In main.html:
<div>
<div class="background-container">
<my-Background></my-Background>
</div>
<div class="menu-container">
<my-Menu id="menu"></my-Menu>
</div>
</div>
In main.css:
.menu-container.ng-enter {
animation:3s fadeInRightBig;
}
.background-container.ng-enter {
animation:3s fadeInDown;
}
Struggling to get the animations from main.css to trigger. It seems like there might be issues with CSS loading order or timing, possibly more than one problem at play.
How can I ensure that all components are loaded and ready for the animations to work smoothly on load?