import Interpolator from './Interpolator' ; import { fireOnce } from '../utils' ; export default class CssInterpolator extends Interpolator { private transition : string ; constructor ( timing = 300 , easing = 'ease-in-out' ) { super ( ) ; this . transition = `transform ${ timing }ms ${ easing }` ; } public play ( element , invertObject , reverse = false , callback ? ) { if ( callback ) { element . addEventListener ( 'transitionend' , ( ) => { element . style . transition = '' ; callback ( ) ; } ) ; } element . style . transformOrigin = '0 0' ; if ( reverse ) { requestAnimationFrame ( ( ) => { requestAnimationFrame ( ( ) => { element . style . transition = this . transition ; element . style . transform = '' ; } ) ; } ) ; } else { element . style . transition = this . transition ; } element . style . transform = `translate(${ invertObject . x }px, ${ invertObject . y }px) scale(${ invertObject . sx }, ${ invertObject . sy })` ; } public playMultiple ( elements , invertObject , reverse = false , callback ? ) { if ( callback ) { fireOnce ( elements , 'transitionend' , ( ) => { elements . forEach ( el => { el . style . transition = '' ; } ) ; callback ( ) ; } ) ; } elements . forEach ( ( element , idx ) => { element . style . transformOrigin = '0 0' ; element . style . transform = `translate(${ invertObject [ idx ] . x }px, ${ invertObject [ idx ] . y }px) scale(${ invertObject [ idx ] . sx }, ${ invertObject [ idx ] . sy })` ; if ( reverse ) { requestAnimationFrame ( ( ) => { requestAnimationFrame ( ( ) => { element . style . transition = this . transition ; element . style . transform = '' ; } ) ; } ) ; } else { element . style . transition = this . transition ; } } ) ; } }