Nesting React CSSTransition causes it to stop working

Question

MY goal is very simple, When the component is loaded, I want:

1. A div to grow
2. The text in that div fades in

A growing div is easy

    <CSSTransition
        in={onLoad}
        timeout={300}
        classNames="grow"
        unmountOnExit
    >
        <div className={"success-container"}></>
    </CSSTransition>

with the CSS

.success-container {
  background: lightblue;
  width: 400px;
  height: 100px;
  transition: height 200ms, width 200ms;
}

.grow-enter {
  height: 50px;
  width: 100px;
}

fade-in is also very easy

    <CSSTransition
        in={onLoad}
        timeout={300}
        classNames="fade"
        unmountOnExit
    >
        <div className={"text-container"}>Here is some fading Text</>
    </CSSTransition>

with the CSS

.text-container {
  width: 100%;
  height: 100%;
  transition: opacity 200ms;
}

.fade-enter {
  opacity: 0;
}

Now When I place the Second Transition inside the first, the fade-in no longer happens and I have no idea how to proceed

Here is a minimum example I made in Code Sandbox

https://codesandbox.io/s/wonderful-fermi-gsz11?file=/src/styles.css

Is there a way to make this work? or another way to get the same effect (preferably without extra dependencies)?

Answer 1

Nevermind, figured it out. You cannot trigger the nested transition simultaneously with its parent, you can only do it after the parent has been rendered.

You would think you could use the inbuilt OnEntered callback to do this but it throws an error. You can however easily use useEffect like this

  useEffect(() => {
    if (onLoad3===true){
      setOnLoad4(true)
    } else {
      setOnLoad4(false)
    }
  }, [onLoad3]);

Heres the whole working code

https://codesandbox.io/s/determined-cdn-7kiy5