66 lines
1.6 KiB
JavaScript
66 lines
1.6 KiB
JavaScript
var Events = {
|
|
ANIMATION_END: 'webkitAnimationEnd',
|
|
TRANSITION_END: 'webkitTransitionEnd'
|
|
};
|
|
|
|
module.exports = {
|
|
|
|
play: function(component, animation) {
|
|
return new Promise(function(resolve, reject) {
|
|
|
|
var el = component.getDOMNode();
|
|
|
|
el.addEventListener(Events.ANIMATION_END, onAnimEnd, false);
|
|
el.style.webkitAnimation = animation;
|
|
|
|
function onAnimEnd(evt) {
|
|
el.style.webkitAnimation = '';
|
|
el.removeEventListener(Events.ANIMATION_END, onAnimEnd);
|
|
return resolve(el);
|
|
}
|
|
|
|
});
|
|
},
|
|
|
|
transition: function(component, style, time, easing) {
|
|
return new Promise(function(resolve, reject) {
|
|
|
|
console.log('transition start', style, time);
|
|
|
|
time = time || '500ms';
|
|
easing = easing || 'linear';
|
|
|
|
var props = Object.keys(style);
|
|
var el = component.getDOMNode();
|
|
|
|
el.style.transition = null;
|
|
|
|
el.addEventListener(Events.TRANSITION_END, onTransitionEnd, false);
|
|
|
|
props.forEach(function(styleProp) {
|
|
el.style[styleProp] = style[styleProp].start;
|
|
});
|
|
|
|
var transition = '';
|
|
props.forEach(function(styleProp) {
|
|
if(transition) transition += ', ';
|
|
transition += styleProp + ' ' + time + ' ' + easing;
|
|
});
|
|
el.style.transition = transition;
|
|
|
|
props.forEach(function(styleProp) {
|
|
el.style[styleProp] = style[styleProp].end;
|
|
});
|
|
|
|
function onTransitionEnd(evt) {
|
|
console.log('transition end', evt);
|
|
el.style.transition = null;
|
|
el.removeEventListener(Events.TRANSITION_END, onTransitionEnd);
|
|
return resolve(el);
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
};
|