import React from 'react' ; import { Observable } from 'rxjs' ; import { Keyframes } from 'styled-components' ; export interface Disposable { dispose ( ) : void ; } export const ANIMATE_PREFIX = 'animate__' ; export const ANIMATE_ANIMATED = `${ ANIMATE_PREFIX }animated` ; function startSimpleAnimate ( element , onEnd ) { const handle = requestAnimationFrame ( ( ) => onEnd ( null ) ) ; return { dispose ( ) { cancelAnimationFrame ( handle ) ; } , } ; } export function startAnimate ( element , animation , onEnd ) { if ( animation == null ) { return startSimpleAnimate ( element , onEnd ) ; } if ( typeof animation === 'object' ) { animation = animation . getName ( ) ; } element . classList . add ( ANIMATE_ANIMATED , `${ ANIMATE_PREFIX }${ animation }` ) ; element . addEventListener ( 'animationend' , handleAnimationEnd ) ; function dispose ( ) { element . classList . remove ( ANIMATE_ANIMATED , `${ ANIMATE_PREFIX }${ animation }` ) ; element . removeEventListener ( 'animationend' , handleAnimationEnd ) ; } function handleAnimationEnd ( _e ) { const event = _e as AnimationEvent ; if ( event . target === element && event . animationName === animation ) { dispose ( ) ; onEnd ( event ) ; } } return { dispose } ; } export const animationFrame$ = new Observable < number > ( ( subscriber ) => { let handle ; const callback = ( arg ) => { subscriber . next ( arg ) ; handle = requestAnimationFrame ( callback ) ; } ; callback ( performance . now ( ) ) ; return ( ) => { cancelAnimationFrame ( handle ) ; } ; } ) ;