preact icon indicating copy to clipboard operation
preact copied to clipboard

Issue with CSSTransition from react-transition-group in production build

Open oliverfindl opened this issue 3 years ago • 0 comments

  • [ ] Check if updating to the latest Preact version resolves the issue.

Describe the bug:

Hello,

I'm unable to solve issue with CSSTransition from react-transition-group. While using dev-server, everything works as expected. When Preact App is built, react-transition-group is not triggering enter transition (although I can see same classes on element as with dev-server), while exit transition works as expected.

Possible duplicate of https://github.com/preactjs/preact/issues/1790, which is nearly 3 years old.

Thanks.

To Reproduce:

/* transition.tsx */

import { FunctionalComponent, h } from 'preact';
import { useState } from 'preact/hooks';
import { CSSTransition } from 'react-transition-group';
import "./transition.css";

const Transition: FunctionalComponent = () => {
	const [isVisible, setIsVisible] = useState<boolean>(false);
	return (
		<div>
			<button type="button" onClick={() => setIsVisible(value => !value)}>Fade</button>
			<CSSTransition in={isVisible} timeout={2000} mountOnEnter unmountOnExit classNames="transition">
				<div>
					Content
				</div>
			</CSSTransition>
		</div>
	);
};

export default Transition;
/* transition.css */

.transition-enter {
	opacity: 0;
}

.transition-enter-active {
	opacity: 1;
	transition: opacity 2000ms;
}

.transition-exit {
	opacity: 1;
}

.transition-exit-active {
	opacity: 0;
	transition: opacity 2000ms;
}

I also tried approach with nodeRef with same result.

Expected behavior:

Both - enter and exit transitions should work.

oliverfindl avatar Mar 05 '22 23:03 oliverfindl