40 lines
1.1 KiB
JavaScript
40 lines
1.1 KiB
JavaScript
// **Transition** is a **Mixin** which lends the ability to handle timed
|
|
// transitions of arbitrary property methods residing on the mixed-in object.
|
|
//
|
|
// You can use this mixin like this:
|
|
//
|
|
// @Transition
|
|
// class YourClass {
|
|
// constructor() {
|
|
// this.x = 0;
|
|
// }
|
|
// get x() {
|
|
// return this.x;
|
|
// }
|
|
// set x(x) {
|
|
// this.x = x;
|
|
// }
|
|
// }
|
|
//
|
|
// const yourObject = new YourClass();
|
|
// yourObject.transition({x: 100}, 2000, 'easeOutQuad');
|
|
//
|
|
// The value of yourObject.x will transition towards 100 over the course of
|
|
// 2000 milliseconds. ***NOTE:*** yourObject **must** have a getter and a
|
|
// setter for "x" defined.
|
|
//
|
|
// This function was heavily inspired by the existence of
|
|
// [jQuery.animate](http://api.jquery.com/animate/), though the API is ***NOT***
|
|
// compatible.
|
|
|
|
import TransitionResult from './result';
|
|
export {TransitionResult};
|
|
|
|
export function TransitionMixin(Superclass) {
|
|
return class Transition extends Superclass {
|
|
transition(props, duration, easing) {
|
|
return new TransitionResult(this, props, duration, easing);
|
|
}
|
|
};
|
|
}
|