Angular 'animate on model change' directive

See a demo

A directive that will help you animate elements when the model updates with some nifty CSS, ng-animate not needed. Read more about it here.

Usage

1. Include ng-animate-model-change.js.
2. Optional: Include ng-animate-model-change.css (just if you don't plan to add any CSS of your own).
3. Add dm.animateModelChange as a dependency to your app.
4. Profit!

Bower

Installable via bower:

bower install ng-animate-model-change

Example

[...]
<section animate-model-change class="number" model="{{model}}"></section>
[...]

...and some nice styling:

.number{
  transition:
    0.3s color ease,
    0.3s transform ease;
}

.number--increment{
  color: green;
  transform: scale(1.6);
}

.number--decrement{
  color: red;
  transform: scale(0.8);
}

You can see more examples in index.html.

Configuration

You can configure the the timeout duration & increment, decrement and non-number classes (for those situations when the model update is not a number).

<span class="foo"
      animate-model-change
      model="{{model}}"
      increment-class="up"
      decrement-class="down"
      non-number-class="unknown"
      timeout="500">
  ...
</span>

...and the CSS:

.foo{
  transition: 0.5s color ease;
  color: black;
}

.up{
  color: green;
}

.down{
  color: red;
}

.unknown{
  color: gray;
}

About ngmilk

ngmilk is the place to go for fresh front-end articles, with a focus on AngularJS. See more on ngmilk.rocks

Follow @ngmilkrocks on Twitter to stay ahead of the game.