class="square linear {{animateSquare}}"
Modals, notifications, and panels can be animated with the above motion classes. To add animation, use the `animation-in` and `animation-out` attributes.
If you don't speficy an animation, the component will use a default. For example, a left-oriented panel will animate in to the right, and out to the left.
Views can be animated in and out as the user moves between pages. There are two ways to define these transitions. To set it using our routing plugin, add the animation classes to the front matter of your view template.
Both properties are optional, but the effects look their best when both views have an in and out animation.
If you're using ui-router directly, you can pass in these same parameters when defining a state.
Our motion classes also work with any built-in Angular directive that supports ngAnimate, such as ng-show
, ng-hide
, ng-if
, and ng-repeat
Just add a motion class to the element with the directive.
Click me: