66 lines
1.1 KiB
Markdown
66 lines
1.1 KiB
Markdown
# css-emitter
|
|
|
|
Bind functions to `transition` and `animation` events.
|
|
|
|
## Installation
|
|
|
|
$ component install ecarter/css-emitter
|
|
|
|
## Example
|
|
|
|
var css = require('css-emitter');
|
|
var el = document.querySelector('#box');
|
|
|
|
var animate = css(el);
|
|
|
|
// Bind
|
|
animate.bind(function(e){
|
|
console.log('%s property changed on %s event', e.propertyName, e.type);
|
|
});
|
|
|
|
// Change height and width
|
|
setTimeout(function(){
|
|
el.className = 'in';
|
|
}, 1000);
|
|
|
|
### Example CSS
|
|
|
|
#box {
|
|
width: 100px;
|
|
height: 100px;
|
|
transition: all 1s ease;
|
|
-webkit-transition: all 1s ease;
|
|
-moz-transition: all 1s ease;
|
|
-o-transition: all 1s ease;
|
|
background: black;
|
|
display: block;
|
|
}
|
|
|
|
#box.in {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
## API
|
|
|
|
### CssEmitter(target:Element)
|
|
|
|
Initialize an `CssEmitter` with given `target` element.
|
|
|
|
### CssEmitter.bind(fn:Function)
|
|
|
|
Register bind function.
|
|
|
|
### CssEmitter.unbind([fn]:Function)
|
|
|
|
Unregister bind function.
|
|
|
|
### CssEmitter.once(fn:Function)
|
|
|
|
Register a function that will fire once then unbind automatically
|
|
|
|
## License
|
|
|
|
MIT
|
|
|