Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

Angular directive to animate elements when a model changes, demo here: http://ng-milk.github.io/angular-animate-model-change/

Topics

Resources

License

Packages

No packages published