import React , { RefObject } from 'react' ; import { Transition } from 'react-transition-group' ; import { TransitionProps } from 'react-transition-group/Transition' ; type Props = { duration ? : number ; } & Omit < TransitionProps < HTMLElement > , 'addEndListener' > ; const GrowTransition = ( props ) => { const collapseAnimationDuration = 250 ; const duration = props . duration || 300 ; const { children , nodeRef , ... otherProps } = props ; const getNode = ( ) => ( nodeRef as RefObject < HTMLElement > ) . current as HTMLElement ; const animationProps = { fill : 'forwards' , duration , } ; const onEnter = ( ) => { getNode ( ) . animate ( [ { transform : 'scale(0.6)' , opacity : 0 , } , { transform : 'scale(1)' , opacity : 1 , } , ] , animationProps ) ; } ; const onExit = ( ) => { const hideAnimationDuration = duration ; getNode ( ) . animate ( [ { transform : 'scale(0.6)' , opacity : 0 } ] , animationProps ) ; getNode ( ) . animate ( [ { maxHeight : '150px' } , { margin : 0 , maxHeight : 0 } ] , { fill : 'forwards' , duration : hideAnimationDuration , delay : hideAnimationDuration , } ) ; } ; return ( < Transition nodeRef = { nodeRef } onEnter = { onEnter } onExit = { onExit } timeout = { duration + collapseAnimationDuration } { ... otherProps } > { children } < /Transition>); } ; export default GrowTransition ;