Animate.css custom binding for Knockout.js
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.
Download knockout.animate.min.js and all dependencies (animate.css, knockout.js) or use Bower command:
bower install knockout.animate
To use knockout.animate in your website, simply drop the animate.css, knockout.js and knockout.animate.js into your document's :
<head>
<link rel="stylesheet" href="animate.min.css">
<script type="text/javascript" src="knockout.min.js"></script>
<script type="text/javascript" src="knockout.animate.min.js"></script>
</head>Then add next data-binding to an element:
<div data-bind="animate:{ animation: 'zoomIn', state: true"></div>That's it! You've got a CSS animated element. Super!
You can control when animation is going to happen by assigning Knockout Observable to state field:
<div data-bind="animate:{ animation: 'zoomIn', state: state"></div>function Viewmodel(){
this.state = ko.observable(true);
}
ko.applyBindings(new Viewmodel());Animation will be played when observable become true.
You can add in and out animation this way:
<div data-bind="animate:{ animation: ['zoomIn', 'zoomOut'], state: state"></div>First animation will be played when state field become true and second when false.
<div data-bind="animate:{ animation: 'zoomIn', state: state, handler: handler"></div>function Viewmodel(){
this.state = ko.observable(true);
this.handler = function(event, state){
//do something here
}
}
ko.applyBindings(new Viewmodel());