import { doTransitionAnimation , TransitionAnimationConfig } from "./FX" ; import { Placement } from "./Airr" ; import { resetCSSAndFireCallback } from "./FXHelpers" ; import { isTopOrBottomPlacement } from "./Utils" ; interface OverlayAnimationConfig { dom : HTMLElement ; width : number ; height : number ; t : number ; callback ? : ( ) => void ; headTo ? : Placement ; appearFrom ? : Placement ; } function getTransitionProps ( t ) { return [ `opacity ${ t }ms ease-out` , `transform ${ t }ms ease-out` ] ; } function getTransformStyle ( scale , translate ) { return `scale(${ scale }) translate3d(${ translate })` ; } function getOutAnimTransform ( headTo , width , height ) { let scaleValue , translateValue ; if ( isTopOrBottomPlacement ( headTo ) ) { scaleValue = "0,1" ; translateValue = `0,${ headTo === "top" ? - 1 * height : height }px,0` ; } else { scaleValue = "1,0" ; translateValue = `${ headTo === "left" ? - 1 * width : width }px,0,0` ; } return getTransformStyle ( scaleValue , translateValue ) ; } function getInAnimTransform ( appearFrom , width , height ) { let scaleValue , translateValue ; if ( isTopOrBottomPlacement ( appearFrom ) ) { scaleValue = "0,1" ; translateValue = `0,${ appearFrom === "bottom" ? height : - 1 * height }px,0` ; } else { scaleValue = "1,0" ; translateValue = `${ appearFrom === "right" ? width : - 1 * width }px,0,0` ; } return getTransformStyle ( scaleValue , translateValue ) ; } function getOverlayAnimationConfig ( config ) { const { dom , width , height , t , callback , headTo , appearFrom } = config ; let startProps , endProps , transform , transitionProps = getTransitionProps ( t ) ; if ( headTo ) { transform = getOutAnimTransform ( headTo , width , height ) ; startProps = { opacity : 1 } ; endProps = { zIndex : 102 , opacity : 0 , WebkitTransform : transform , transform } ; } else if ( appearFrom ) { const endTransform = "scale(1, 1) translate3d(0,0,0)" ; transform = getInAnimTransform ( appearFrom , width , height ) ; startProps = { WebkitTransform : transform , transform } ; endProps = { zIndex : 102 , WebkitTransform : endTransform , transform : endTransform , opacity : 1 } ; } return { element : dom , startProps , endProps , transitionProps , endAfter : t , endCallback : ( ) : void => { resetCSSAndFireCallback ( dom , callback ) ; } } ; } /**
 * Used by Mayers for leaving animation
 */ export function doOverlayAnimation ( config ) { const { dom , width , height , t , headTo , callback , appearFrom } = config ; doTransitionAnimation ( getOverlayAnimationConfig ( { dom , width , height , t , headTo , appearFrom , callback } ) ) ; }