反应“反应过渡组”不起作用

Question

I'm migrating my project to the last version of React, I a see that ReactCSSTransitionGroup are deprecated ... So I using recomended package by React devs. When I was using ReactCSSTransitionGroup the animation works correctly when components render, but with this package the component doesn't work and doesn't animate.

I make a simple example to test, but doesn't work... Whats wrong?

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')
);

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;
}

Answer 1

from the doc : "You must provide the key attribute for all children of CSSTransitionGroup, even when only rendering a single item. This is how React will determine which children have entered, left, or stayed."

Moreover, you should also check your css class name and adding "appear" prefix if you want animation during initial mount:

.example-appear {
    opacity: 0.01;
    border: 1px solid red;
}
.example-appear.example-appear-active {
    opacity: 1;
    transition: all 2s ease 0s;
    border: 1px solid orange;
}