ReactCSSTransitionGroup

ReactCSSTransitionGroup

我正在将项目迁移到React的最新版本,我看到ReactCSSTransitionGroupdeprecated ...所以我使用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;
}

最佳答案

来自doc:“即使仅渲染单个项目,您也必须为CSSTransitionGroup的所有子项提供key属性。这是React将确定哪些子项已进入,离开或停留的方式。”

此外,如果要在初始安装过程中进行动画处理,还应该检查CSS类名称并添加“ appear”前缀。

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

08-07 21:23