Skip to content
This repository has been archived by the owner on Sep 20, 2023. It is now read-only.

attempting to get transition property in css to apply on mount class change #223

Open
wispyco opened this issue Jul 14, 2020 · 0 comments
Open

Comments

@wispyco
Copy link

wispyco commented Jul 14, 2020

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant