Why is React Transition Group animation not working?

Question

React

I'm learning React from a video course on YouTube, I wrote the character code into a character, as in the video, I checked it with an example in the teacher's repository , but the animation does not work for me - when the logo is shown, it appears without animation, and the following appears in the console

mistake

React & Redux :1 Warning: Failed prop type: The prop `timeout` is marked as required in `CSSTransition`, but its value is `undefined`.
    at CSSTransition (http://localhost:3000/static/js/vendors~main.chunk.js:32542:35)
    at Lesson (http://localhost:3000/static/js/main.chunk.js:76:5)
console.<computed> @ React & Redux :1
overrideMethod @ react_devtools_backend.js:2560
printWarning @ React & Redux :117
error @ React & Redux :93
checkPropTypes @ React & Redux :620
validatePropTypes @ React & Redux :1072
jsxWithValidation @ React & Redux :1192
render @ React & Redux :27
finishClassComponent @ React & Redux :17485
updateClassComponent @ React & Redux :17435
beginWork @ React & Redux :19073
beginWork$1 @ React & Redux :23940
performUnitOfWork @ React & Redux :22776
workLoopSync @ React & Redux :22707
renderRootSync @ React & Redux :22670
performSyncWorkOnRoot @ React & Redux :22293
(anonymous) @ React & Redux :11327
unstable_runWithPriority @ React & Redux :468
runWithPriority$1 @ React & Redux :11276
flushSyncCallbackQueueImpl @ React & Redux :11322
flushSyncCallbackQueue @ React & Redux :11309
flushPendingDiscreteUpdates @ React & Redux :22372
flushDiscreteUpdates @ React & Redux :22353
finishEventHandler @ React & Redux :3714
batchedEventUpdates @ React & Redux :3748
dispatchEventForPluginEventSystem @ React & Redux :8507
attemptToDispatchEvent @ React & Redux :6005
dispatchEvent @ React & Redux :5924
unstable_runWithPriority @ React & Redux :468
runWithPriority$1 @ React & Redux :11276
discreteUpdates$1 @ React & Redux :22413
discreteUpdates @ React & Redux :3756
dispatchDiscreteEvent @ React & Redux :5889
Show 3 more frames
React & Redux :1 Warning: Failed prop type: The prop `timeout` is marked as required in `CSSTransition`, but its value is `undefined`.
    at CSSTransition (http://localhost:3000/static/js/vendors~main.chunk.js:32542:35)
    at TransitionGroup (http://localhost:3000/static/js/vendors~main.chunk.js:33994:30)
    at div
    at Lesson (http://localhost:3000/static/js/main.chunk.js:76:5)
console.<computed> @ React & Redux :1
overrideMethod @ react_devtools_backend.js:2560
printWarning @ React & Redux :220
error @ React & Redux :196
checkPropTypes @ React & Redux :1935
validatePropTypes @ React & Redux :2136
cloneElementWithValidation @ React & Redux :2280
(anonymous) @ React & Redux :115
getNextChildMapping @ React & Redux :105
getDerivedStateFromProps @ React & Redux :78
applyDerivedStateFromProps @ React & Redux :12432
updateClassInstance @ React & Redux :13035
updateClassComponent @ React & Redux :17432
beginWork @ React & Redux :19073
beginWork$1 @ React & Redux :23940
performUnitOfWork @ React & Redux :22776
workLoopSync @ React & Redux :22707
renderRootSync @ React & Redux :22670
performSyncWorkOnRoot @ React & Redux :22293
(anonymous) @ React & Redux :11327
unstable_runWithPriority @ React & Redux :468
runWithPriority$1 @ React & Redux :11276
flushSyncCallbackQueueImpl @ React & Redux :11322
flushSyncCallbackQueue @ React & Redux :11309
flushPendingDiscreteUpdates @ React & Redux :22372
flushDiscreteUpdates @ React & Redux :22353
finishEventHandler @ React & Redux :3714
batchedEventUpdates @ React & Redux :3748
dispatchEventForPluginEventSystem @ React & Redux :8507
attemptToDispatchEvent @ React & Redux :6005
dispatchEvent @ React & Redux :5924
unstable_runWithPriority @ React & Redux :468
runWithPriority$1 @ React & Redux :11276
discreteUpdates$1 @ React & Redux :22413
discreteUpdates @ React & Redux :3756
dispatchDiscreteEvent @ React & Redux :5889
Show 6 more frames
React & Redux :1 Warning: Failed prop type: The prop `timeout` is marked as required in `Transition`, but its value is `undefined`.
    at Transition (http://localhost:3000/static/js/vendors~main.chunk.js:33425:30)
    at CSSTransition (http://localhost:3000/static/js/vendors~main.chunk.js:32542:35)
    at div
    at TransitionGroup (http://localhost:3000/static/js/vendors~main.chunk.js:33994:30)
    at div
    at Lesson (http://localhost:3000/static/js/main.chunk.js:76:5)

Lesson.jsx

import React, { Component } from 'react';
import logo from './images/640px-React-icon.svg.png';
import { TransitionGroup, CSSTransition } from 'react-transition-group';

import './styles.css';

class Lesson extends React.Component {
    state = {
        isLogoVisible: false
    };

    toggleLogo = () => {
        this.setState({
            isLogoVisible: !this.state.isLogoVisible
        });
    };

    render() {
        const { isLogoVisible } = this.state;
        return (
            <div className="wrapper">
                <div>
                    <h2>Do you want to see React logo?</h2>
                    <input type="radio" name="logo" checked={isLogoVisible} onChange={this.toggleLogo} />Yes
                    <input type="radio" name="logo" checked={!isLogoVisible} onChange={this.toggleLogo} />No
                </div>
                <TransitionGroup>
                    {isLogoVisible && (
                      <CSSTransition classNames="option">
                          <div>
                            <img src={logo} />
                          </div>
                      </CSSTransition>
                    )}
                </TransitionGroup>
            </div>
        );
    }
}

export default Lesson;

styles.css

.option-enter {
  opacity: 0;
}

.option-enter.option-enter-active {
  opacity: 1;
  transition: opacity 2s ease;
}

.option-exit {
  opacity: 1;
}

.option-exit.option-exit-active {
  opacity: 0;
  transition: opacity 2s ease;
}

/*
.option-enter {
    opacity: 0;
    transform: translate(-500px, 0);
    transform: translate3d(-500px, 0, 0);
}
   
.option-enter.option-enter-active {
    opacity: 1;
    transition: opacity 2s ease;
    transform: translate(0,0);
    transform: translate3d(0,0,0);
    transition-property: transform, opacity;
    transition-duration: 100ms;
    transition-timing-function: cubic-bezier(0.175, 0.665, 0.320, 1), linear;
}
   
.option-exit {
    opacity: 1;
    transform: translate(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition-property: transform, opacity;
    transition-duration: 100ms;
    transition-timing-function: cubic-bezier(0.175, 0.665, 0.320, 1), linear;
}
   
.option-exit.option-exit-active {
    opacity: 0;
    transform: translate(500px, 0);
    transform: translate3d(500px, 0, 0);
}
   
.wrapper {
     max-width: 500px;
     margin: 20px auto;
     text-align: center;
}
   
img {
    max-width: 100%;
}
*/

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './25_animations/Lesson.jsx';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

index.css

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  background-color: #f7f7f7;
}

React, ReactDOM, React Transition Group and registerServiceWorker dependencies are installed. Why is the animation not working?

Answer 1

Learning React in a YouTube video course

It is customary for people to start learning with documentation.

wrote the code character to character, as in the video, double-checked with an example in the teacher 's repository , but animation does not work for me

This video is two and a half years old. What do you think, could there have been any changes in the library used during this time? Such that the client code, which was previously working, began to do something wrong. I personally think they could.

The prop `timeout` is marked as required in `CSSTransition`, but its value is `undefined`

What's incomprehensible here? Absent, should be - well, add it.
And, of course, no TransitionGroup is needed for what you're trying to do. Instead of

<TransitionGroup>
  {isLogoVisible && (
    <CSSTransition classNames="option">
      ...

let it be

<CSSTransition in={isLogoVisible} unmountOnExit timeout={2000} classNames="option">
  ...