Open wispyco opened 4 years ago
I am checking for the mount state inside the transitionstatus component. I then apply a visible or hidden class depending on the mount.
<TransitionState> {({ transitionStatus, exit, entry, mount }) => { return ( <ImgAnimate> <Img className={`things-logo ${mount ? "visible" : "hidden"}`} fluid={data.placeholderImage.childImageSharp.fluid} /> </ImgAnimate> ) }} </TransitionState>
My css classes that get applied have a transition property on them with some easing. Is there a way to have them apply. Is it because the component is mounting and remounting that they don't get applied. Not sure. Im using styled components.
const ImgAnimate = styled.div` .things-logo { transition: all 2s ease-in-out; } .things-logo.hidden { overflow: hidden; position: fixed !important; top: 0; left: 0; width: 400px; transition: all 2s ease-in-out; } .things-logo.visible { transform: scale(1); transition: all 2s ease-in-out; } `
Thanks ahead of time
I am checking for the mount state inside the transitionstatus component. I then apply a visible or hidden class depending on the mount.
My css classes that get applied have a transition property on them with some easing. Is there a way to have them apply. Is it because the component is mounting and remounting that they don't get applied. Not sure. Im using styled components.
Thanks ahead of time