import anime from 'animejs' ; import { MutableRefObject } from 'react' ; import { AnimatorClassSettings , AnimatorRef } from '@arwes/animator' ; import { Theme } from '@arwes/design' ; type ContainerRef = MutableRefObject < HTMLUListElement > ; const transitionRemoveList = ( animator , containerRef ) : void => { const container = containerRef . current ; if ( container ) { const items = container . querySelectorAll ( ':scope > li' ) ; anime . remove ( items ) ; } } ; const transitionList = ( animator , containerRef , theme ) : void => { transitionRemoveList ( animator , containerRef ) ; const { flow , duration } = animator ; const isEntering = flow . entering || flow . entered ; const durationTransition = isEntering ? duration . enter : duration . exit ; const container = containerRef . current ; const items = container . querySelectorAll ( ':scope > li' ) ; const { space } = theme ; if ( isEntering ) { anime ( { targets : items , delay : anime . stagger ( duration . stagger ) , opacity : { easing : 'easeOutExpo' , duration : durationTransition / 3 , value : [ 0 , 1 ] } , translateX : { easing : 'easeOutSine' , duration : durationTransition , value : [ - space ( 2 ) , 0 ] } } ) ; } else { anime ( { targets : items , easing : ( ) => ( progress ) : number => progress === 1 ? 1 : 0 , duration : durationTransition , opacity : [ 1 , 0 ] } ) ; } } ; const animator = { combine : true , manager : 'stagger' , onAnimateEntering : transitionList , onAnimateExiting : transitionList , onAnimateUnmount : transitionRemoveList } ; export { animator } ;