An animation directive to use with ngAnimate 1.2+ and ui-router
$ bower install angular-ui-router-anim-in-out --save
- Include
anim-in-out.js
&anim-in-out.css
on the page - Include module as a dependency of your app
angular.module('ExampleApp', ['ngAnimate', 'ui.router', 'anim-in-out'])
- Configure states as per ui-router instructions
- Add the animation directive
anim-in-out
to yourui-view
elements by applying the classanim-in-out
<div ui-view="mainView" class="anim-in-out"></div>
- Finally add classes from the
anim-in-out.css
to any elements you wish to transition on state change eg.anim-fade
,anim-slide-left
<div ui-view="mainView" class="anim-in-out anim-fade" data-anim-speed="1000">
<!-- Dynamically loaded view content -->
<div class="my-component anim-slide-left"></div>
</div>
Animations are triggered by javascript in order to provide events.
// In your main controller
$rootScope.$on('animStart', function($event, element, speed) {
// do something
});
$rootScope.$on('animEnd', function($event, element, speed) {
// do something
});
The default transition speed is 1000ms
this can be altered using the data-anim-speed
attribute on the ui-view
. This is optionally further customised by the data-anim-in-speed
and data-anim-out-speed
attributes.
By default the animation of the incoming state will be triggered after a delay (data-anim-speed
/ data-anim-in-speed
), but this can be changed by setting the attribute data-anim-sync
to true
.
<div ui-view="mainView" class="anim-in-out" data-anim-sync="true"></div>
If you notice a difference in behaviour after compiling your app such as an initial transition failing to trigger the suggestion in this comment/plunkr may help you, or see below:.
angular
.module('app', ['ngAnimate'])
.controller('MainCtrl', function ($scope, $timeout, $rootElement) {
// Monkey-patch for ngAnimate to force animations to be played right
// on the first digest. A "run-time revert" of this commit:
// https://github.com/angular/angular.js/commit/eed2333298412fbad04eda97ded3487c845b9eb9
// Note: dirty hack! Do not use in production code unless you accept
// all consequences!
$rootElement.data("$$ngAnimateState").running = false;
});
# Install gulp and dependencies
$ npm install
# Compile sass
$ gulp sass
http://homerjam.github.io/angular-ui-router-anim-in-out/
angular-gsapify-router โ a similar directive that uses GSAP to power transitions; also features fine grained configuration using a priority attached to each state.