Element appears with blinked when using CSSTransition with `unmountOnExit`

[Mookiepiece]

version: 4.4.4

What is the current behavior?

CSSTransition with unmountOnExit will render it's child without -appear or -enter className attached for the first frame when it appears.

What is the expected behavior?

Element appears with -appear or -enter.

Could you provide a CodeSandbox demo reproducing the bug?

• https://codesandbox.io/s/modest-dewdney-k1inpg
  • Click button multiple times to reproduce, element appears with blinked.
  • Goto package.json, downgrade to 4.4.2, and animation recovered.
• Also could be reproduced using example in the doc by upgrade from 2.7.0 to 4.4.4, https://reactcommunity.org/react-transition-group/css-transition

This is caused by #749

[koba04]

@Mookiepiece Thank you! I'll figure out how react-transition-group should behave.
I've created a CodeSandbox project that works with v4.4.4 based on your example.
https://codesandbox.io/s/jovial-marco-17xo6r
I hope this helps you.

[Mookiepiece]

@koba04

Yes I'll share what I found with you.

As we know, enter + enter-active transition works well with CSSTransition, and not working with Transition. This is because we triggered reflow in CSSTransition.

https://github.com/reactjs/react-transition-group/blob/master/src/CSSTransition.js#L198

but in that pr, you introduced another approach which is more modern which is rQA. which delayed the entire performEnter process and CSSTransition is not the host now.

Here's my suggestion which respects our original approach (I don't fully tested it ):

      if (nextStatus === ENTERING) {
        if (this.props.unmountOnExit || this.props.mountOnEnter) {
          document.body?.scrollTop; // <- replace with this
        }
        this.performEnter(mounting);      
      } else {
        this.performExit();
      }

Or we can add an before entered hook ?

        if (this.props.unmountOnExit || this.props.mountOnEnter) {
          this.beforeEnter('Hey CSSTransition its your turn now');
          nextTick(() => this.performEnter(mounting));
        }

[koba04]

@Mookiepiece Thank you! Triggering a forced reflow is not good from a performance perspective, but it might make sense to avoid introducing another issue. We'll need to verify the approach works fine with all cases, so I'll work on it.

[koba04]

I've created a PR for this. We need more tests to merge #847.

[alejandrofdiaz]

I've experienced test regressions during react-testing-library unit tests. Testing for component behavior after mounting a Transition element caused the mounting to be delayed. In case anybody found this helpful when looking for the error, obtaining Unable to find node on an unmounted component. error from react-testing-library. I expect this to be fixed after #847 .

[koba04]

@alejandrofdiaz Thank you for your feedback! I'll merge #847 and reconsider a way to avoid forcing reflow later.

[koba04]

I've merged #847, so this'll be fixed at v4.4.5

[github-actions]

🎉 This issue has been resolved in version 4.4.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀