I am currently in the process of updating my project to the latest version of React and I have noticed that ReactCSSTransitionGroup is now considered deprecated. As recommended by React developers, I have switched to using the suggested package. Previously, when I was utilizing ReactCSSTransitionGroup, the animations functioned correctly during component rendering. However, with this new package, the components are not animating as expected.
In an attempt to troubleshoot, I created a simple example test scenario but encountered issues. What could be causing this?
Here is the React code:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
class App extends Component {
render() {
return (
<CSSTransitionGroup
transitionName="example"
transitionAppear={true}
transitionAppearTimeout={3000}
transitionEnter={true}
transitionEnterTimeout={3000}
transitionLeave={false}>
<div id="container">
Animation test
</div>
</CSSTransitionGroup>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
And here is the CSS code:
.example-enter {
opacity: 0.01;
border: 1px solid red;
}
.example-enter.example-enter-active {
opacity: 1;
transition: all 2s ease 0s;
border: 1px solid orange;
}
.example-leave {
opacity: 1;
border: 1px solid green;
}
.example-leave.example-leave-active {
opacity: 0.01;
transition: all 3s ease 0s;
border: 1px solid blue;
}