preact
preact copied to clipboard
Issue with CSSTransition from react-transition-group in production build
- [ ] 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.