React transition group animate between components (fade in component in place of another)

Question

I'm using react-transition-group for animations in my app.

I have a Popup where I want to animate between two contents. I want to make the first content fade out and the second content appear in its place.

So far I have a problem where while animating the second content appears below the first one while the first one is still visible. (See the screenshot)

Any help will be much appreciated.

My code

const [stage, setStage] = useState('register');

  function changeStage(stageVal) {
    setStage(stageVal);
  }
...
<Popup togglePopupWindow={togglePopupWindow} setStage={setStage}>
        <CSSTransitionGroup
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}
        >
          {stage === 'register' && (
          <>
            <Form>
              <h2>Register</h2>
              <Input type="text" placeholder="Login" />
              <Input type="email" placeholder="Email" />
              <Input type="password" placeholder="Password" />
              <Button text="Register" />
            </Form>
            <p>
              <span>Already registered?</span>
              <Button className="popup__login" text="Login" onClick={() => changeStage('login')} />
            </p>
        </>
          )
      }
          {stage === 'login' && (
          <Form>
            <h2>Login</h2>
            <Input type="text" placeholder="Login" />
            <Input type="password" placeholder="Password" />
            <Button text="Register" />
          </Form>
          )
   }
        </CSSTransitionGroup>
      </Popup>

Styles

.example-enter {
    opacity: 0;
    }

.example-enter.example-enter-active {
   opacity: 1;
   transition: opacity 500ms ease-in-out;
}

.example-leave {
   opacity: 1;
}

.example-leave.example-leave-active {
   opacity: 0;
   transition: opacity 300ms ease-in-out;
}

score 0 · Answer 1 · answered Jun 01 '19 at 18:14

Try taking out .example-enter and .example-leave on each of the ...-active CSS properties.. You set .example-enter to 0 opacity and then replace the .example-enter to 1.. meaning you're setting 1 on .example-enter with your .example-enter-active after the initial declaration... so the 0 is overwritten.

.example-enter {
    opacity: 0;
    }
.example-enter-active {
   opacity: 1;
   transition: opacity 500ms ease-in-out;
}

.example-leave {
   opacity: 1;
}

.example-leave-active {
   opacity: 0;
   transition: 
}

Looking at the DOM what is happening is that the second form appears below the first one before the fist one disappears — Person, Jun 02 '19 at 08:14

React transition group animate between components (fade in component in place of another)

1 Answers1