Angular directive to animate elements when a model changes, demo here: http://ng-milk.github.io/angular-animate-model-change/
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.gitignore
LICENSE
README.md
bower.json
eslint.json
gulpfile.js
index.html
package.json

README.md

Angular 'animate on model change' directive

Angular animate on model change demo

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.