Почему не работает анимация React Transition Group?

Question

[Sangwoo Kim]

Изучаю React по видеокурсу на YouTube, написал код символ в символ, как на видео, перепроверил с примером в репозитории учителя, но у меня не работает анимация - при показе логотипа, он появляется без анимации, а в консоли появляется следующая

ошибка

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 и registerServiceWorker установлены. Почему не работает анимация?

Answer 1

[0xD34F]

Изучаю React по видеокурсу на YouTube

Изучение принято начинать с документации.

написал код символ в символ, как на видео, перепроверил с примером в репозитории учителя, но у меня не работает анимация

Этому видео два с половиной года. Как думаете, могли ли за это время случиться какие-то изменения в используемой библиотеке? Такие, что клиентский код, ранее бывший рабочим, стал делать что-то не то. Я лично думаю, что могли.

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

Что тут непонятного? Отсутствует, должен быть - ну так добавьте.

И, конечно, никакой TransitionGroup для того, что вы пытаетесь сделать, не нужен. Вместо

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

пусть будет

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