Skip to content

Commit 0572d1a

Browse files
committed
Avoid an occasional flicker when the exiting node is removed
1 parent 4ecdd2a commit 0572d1a

File tree

1 file changed

+9
-2
lines changed

1 file changed

+9
-2
lines changed

packages/react-css-transition-replace/src/ReactCSSTransitionReplaceChild.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,8 +106,15 @@ class CSSTransitionGroupChild extends React.Component {
106106
removeListeners()
107107
}
108108

109-
removeClass(node, className)
110-
removeClass(node, activeClassName)
109+
// If we're leaving, removing the classes can result in a redraw before
110+
// React has chance to actually remove the node, which results in a flash
111+
// of both nodes being displayed at the same time with their default styles
112+
// (ie, probably 100% opacity).
113+
// Since the node is about to be removed, we don't actually need to clean up the classes on it.
114+
if (animationType !== "leave") {
115+
removeClass(node, className)
116+
removeClass(node, activeClassName)
117+
}
111118

112119
if (removeListeners) {
113120
removeListeners()

0 commit comments

Comments
 (0)