Closed Mookiepiece closed 1 year ago
@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.
@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));
}
@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.
I've created a PR for this. We need more tests to merge #847.
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 .
@alejandrofdiaz Thank you for your feedback! I'll merge #847 and reconsider a way to avoid forcing reflow later.
I've merged #847, so this'll be fixed at v4.4.5
:tada: This issue has been resolved in version 4.4.5 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
version: 4.4.4
CSSTransition with
unmountOnExit
will render it's child without-appear
or-enter
className attached for the first frame when it appears.Element appears with
-appear
or-enter
.4.4.2
, and animation recovered.2.7.0
to4.4.4
, https://reactcommunity.org/react-transition-group/css-transitionThis is caused by #749