# angular-ui-router-anim-in-out

> An animation directive to use with ngAnimate 1.2+ and ui-router, providing events between transition phases

Latest version **1.0.2** (published 2015-10-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-ui-router-anim-in-out
pnpm add angular-ui-router-anim-in-out
yarn add angular-ui-router-anim-in-out
bun add angular-ui-router-anim-in-out
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2015-10-26 |
| First published | 2015-10-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+10 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 231 |
| Author | James Homer |
| Maintainers | homerjam |

## Links

- npm: https://www.npmjs.com/package/angular-ui-router-anim-in-out
- Repository: https://homerjam@github.com/homerjam/angular-ui-router-anim-in-out
- Homepage: https://github.com/homerjam/angular-ui-router-anim-in-out
- Issues: https://github.com/homerjam/angular-ui-router-anim-in-out/issues
- npm.io page: https://npm.io/package/angular-ui-router-anim-in-out

## Dependencies (3)

- [angular](https://npm.io/package/angular.md) ^1.4.7
- [angular-animate](https://npm.io/package/angular-animate.md) ^1.4.7
- [angular-ui-router](https://npm.io/package/angular-ui-router.md) ^0.2.15

## Recent versions

- 1.0.2 (latest) — 2015-10-26
- 1.0.1 — 2015-10-23
- 1.0.0 — 2015-10-23

## README

# angular-ui-router-anim-in-out

An animation directive to use with ngAnimate 1.2+ and ui-router


## Installation

`$ bower install angular-ui-router-anim-in-out --save`


## Quick Start

* Include `anim-in-out.js` & `anim-in-out.css` on the page
* Include module as a dependency of your app

```js
angular.module('ExampleApp', ['ngAnimate', 'ui.router', 'anim-in-out'])
```

* Configure states as per [ui-router](https://github.com/angular-ui/ui-router) instructions
* Add the animation directive `anim-in-out` to your `ui-view` elements by applying the class `anim-in-out`

```html
<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`

```html
<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>
```

## Usage

Animations are triggered by javascript in order to provide events.

```js
// 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`.

```html
<div ui-view="mainView" class="anim-in-out" data-anim-sync="true"></div>
```


## Gotchas

If you notice a difference in behaviour after compiling your app such as an initial transition failing to trigger the suggestion in this [comment](https://github.com/angular/angular.js/issues/5130#issuecomment-34371140)/[plunkr](http://plnkr.co/edit/aoyRehXQnItGYA0EzTOC?p=preview) may help you, or see below:.

```js
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;
    });
```

## Compile Sass

    # Install gulp and dependencies
    $ npm install
    
    # Compile sass
    $ gulp sass


## Demo

http://homerjam.github.io/angular-ui-router-anim-in-out/

## You may also like

[angular-gsapify-router](https://github.com/homerjam/angular-gsapify-router) — a similar directive that uses [GSAP](http://greensock.com/) to power transitions; also features fine grained configuration using a priority attached to each state.

---
_Source: https://npm.io/package/angular-ui-router-anim-in-out · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._