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

Question

我正在将我的项目迁移到 React 的最新版本，我看到 ReactCSSTransitionGroup 是 deprecated... 所以我使用 React 开发人员的 recomended package。当我使用ReactCSSTransitionGroup 时，动画在组件渲染时可以正常工作，但是使用此包时，组件无法工作并且没有动画。

我做了一个简单的例子来测试，但是不行……怎么了？

反应代码：

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 代码：

.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

来自文档：“您必须为 CSSTransitionGroup 的所有子项提供 key 属性，即使仅呈现单个项目也是如此。这就是 React 将确定哪些子项已进入、离开或留下的方式。”

此外，您还应该检查您的 css 类名称，如果您想要在初始挂载期间添加动画，请添加“出现”前缀：

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