import anime , { AnimeAnimParams } from 'animejs' ; import { AnimatedSettings } from '../constants' ; interface TransitionVisibilityParams { target : AnimeAnimParams [ 'targets' ] ; duration : number ; delay ? : number ; } const transitionVisibilityIn = ( params ) : void => { const { target , duration , delay = 0 } = params ; anime . timeline ( { targets : target , easing : 'easeOutSine' , duration : duration / 3 } ) . add ( { opacity : [ 0 , 1 ] } , delay ) . add ( { opacity : [ 1 , 0.5 ] } ) . add ( { opacity : [ 0.5 , 1 ] } ) ; } ; const transitionVisibilityOut = ( params ) : void => { const { target , duration , delay } = params ; anime . timeline ( { targets : target , easing : 'easeOutSine' , duration : duration / 3 } ) . add ( { opacity : [ 1 , 0 ] } , delay ) . add ( { opacity : [ 0 , 0.5 ] } ) . add ( { opacity : [ 0.5 , 0 ] } ) ; } ; const transitionVisibility = { initialStyles : { opacity : 0 } , entering : transitionVisibilityIn , exiting : transitionVisibilityOut } ; const transitionVisibilityDelayed = { initialStyles : { opacity : 0 } , entered : transitionVisibilityIn , exiting : transitionVisibilityOut } ; export { transitionVisibilityIn , transitionVisibilityOut , transitionVisibility , transitionVisibilityDelayed } ;