https://github.com/ng-milk/angular-animate-model-change
Angular directive to animate elements when a model changes, demo here: http://ng-milk.github.io/angular-animate-model-change/
https://github.com/ng-milk/angular-animate-model-change
angularjs css javascript
Last synced: 12 months ago
JSON representation
Angular directive to animate elements when a model changes, demo here: http://ng-milk.github.io/angular-animate-model-change/
- Host: GitHub
- URL: https://github.com/ng-milk/angular-animate-model-change
- Owner: ng-milk
- License: mit
- Created: 2015-12-08T13:19:40.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-12-18T22:10:06.000Z (over 10 years ago)
- Last Synced: 2024-11-10T16:41:33.135Z (over 1 year ago)
- Topics: angularjs, css, javascript
- Language: HTML
- Homepage:
- Size: 17.6 KB
- Stars: 9
- Watchers: 2
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular 'animate on model change' directive
### [See a demo](http://ng-milk.github.io/angular-animate-model-change/)
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](https://ngmilk.rocks/2015/12/18/animate-elements-when-a-model-changes-in-angularjs/).
## 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`:
```bash
bower install ng-animate-model-change
```
## Example
```html
[...]
[...]
```
...and some nice styling:
```css
.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](https://github.com/ng-milk/angular-animate-model-change/blob/master/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).
```html
...
```
...and the CSS:
```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](https://ngmilk.rocks)
Follow [@ngmilkrocks](http://twitter.com/ngmilkrocks) on Twitter to stay ahead of the game.