https://github.com/dnbard/knockout.animate
Animate.css custom binding for Knockout.js
https://github.com/dnbard/knockout.animate
Last synced: about 1 year ago
JSON representation
Animate.css custom binding for Knockout.js
- Host: GitHub
- URL: https://github.com/dnbard/knockout.animate
- Owner: dnbard
- Created: 2014-11-03T20:40:15.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2016-10-23T16:37:43.000Z (over 9 years ago)
- Last Synced: 2025-04-11T01:04:33.847Z (about 1 year ago)
- Language: JavaScript
- Homepage: http://dnbard.github.io/knockout.animate
- Size: 8.79 KB
- Stars: 14
- Watchers: 5
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
knockout.animate
================
*Animate.css custom binding for Knockout.js*
[animate.css](https://github.com/daneden/animate.css) is a bunch of cool, fun, and cross-browser animations for you to use in your projects `now with support of Knockout.js`. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
Installing
----------
Download `knockout.animate.min.js` and all dependencies (`animate.css`, `knockout.js`) or use `Bower` command:
```
bower install knockout.animate
```
Usage
-----
To use `knockout.animate` in your website, simply drop the `animate.css`, `knockout.js` and `knockout.animate.js` into your document's :
```html
```
Then add next data-binding to an element:
```html
```
That's it! You've got a CSS animated element. Super!
Use observable to control animation
-----------------------------------
You can control when animation is going to happen by assigning `Knockout Observable` to `state` field:
```html
```
```js
function Viewmodel(){
this.state = ko.observable(true);
}
ko.applyBindings(new Viewmodel());
```
Animation will be played when observable become `true`.
Assign `in` and `out` states and toggle between them
----------------------------------------------------
You can add `in` and `out` animation this way:
```html
```
First animation will be played when `state` field become `true` and second when `false`.
Assign custom handler on state change
-------------------------------------
```html
```
```js
function Viewmodel(){
this.state = ko.observable(true);
this.handler = function(event, state){
//do something here
}
}
ko.applyBindings(new Viewmodel());
```