ReactCSSTransitionGroup 不起作用答案

【问题标题】：ReactCSSTransitionGroup doesn't workReactCSSTransitionGroup 不起作用
【发布时间】：2016-10-27 23:47:38
【问题描述】：

我在使用 ReactCSSTransitionGroup 时遇到了一些问题。当用户单击页面上的按钮时，我想显示某种带有一些精美动画的模态表单。这是代码：

import React from 'react';
import ReactDOM from 'react-dom';
import AppConfig from './AppConfig';

export default class AppTop extends React.Component {
    constructor(props) {
        super(props);
        this.state = { openConfig: false };
    }
    toggleConfig() {
        this.setState({ openConfig: !this.state.openConfig });
    }
    render() {
        // only shows up openConfig is true
        const domAppConfig = this.state.openConfig ? <AppConfig ... /> : '';

        return (
            <div>
                ... //some elements
                <button onClick={this.toggleConfig.bind(this)}>Config</button>
                { domAppConfig }
            </div>
        );
    }
}

这是 AppTop 组件。您可以看到渲染内部的按钮组件，单击此按钮，openConfig 状态将切换。现在这是 AppConfig 组件：

import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

export default class AppConfig extends React.Component {
    render() {
        return (
            <ReactCSSTransitionGroup
                transitionName="anim-app-config"
                transitionEnterTimeout={300}
                transitionLeaveTimeout={300}
            >
                <div id="app-config">
                    <h1>App Config</h1>
                    <p>Helloworld!</p>
                </div>
            </ReactCSSTransitionGroup>
        );
    }
}

组件很简单，只是打印一些文本。这就是'.anim-app-config'的风格：

.anim-app-config-enter {
    opacity: .1;
}
.anim-app-config-enter.anim-app-config-enter-active {
    opacity: 1;
    transition: opacity 300ms ease-in;
}
.anim-app-config-leave {
    opacity: 1;
}
.anim-app-config-leave.anim-app-config-leave-active {
    opacity: .1;
    transition: opacity 300ms ease-in;
}

当我运行这个应用程序时，动画不起作用。只是组件立即显示和隐藏，没有动画。我对此进行了搜索，并尝试在 AppConfig 组件中添加一个密钥，但没有成功。再包装一个 div 也没有用。添加 transitionAppear={true} 对我也不起作用。

使用 ReactCSSTransitionGroup 组件我错了吗？还是我错过了什么？我很难在 React 上添加动画，所以请给我一些建议。谢谢。

【问题讨论】：

标签： javascript css animation reactjs

【解决方案1】：

你应该在你的 Apptop 中有 ReactCSSTransitionGroup 因为它会渲染或不渲染。在 AppConfig 中制作它不会有任何动画，因为它会将它呈现为一个直接的组件。

import React from 'react';
import ReactDOM from 'react-dom';
import AppConfig from './AppConfig';

export default class AppTop extends React.Component {
    constructor(props) {
        super(props);
        this.state = { openConfig: false };
    }
    toggleConfig() {
        this.setState({ openConfig: !this.state.openConfig });
    }
    render() {
        // only shows up openConfig is true
        const domAppConfig = this.state.openConfig ? <AppConfig ... /> : '';

        return (
            <div>
                ... //some elements
                <button onClick={this.toggleConfig.bind(this)}>Config</button>
                        <ReactCSSTransitionGroup
                transitionName="anim-app-config"
                transitionEnterTimeout={300}
                transitionLeaveTimeout={300}
            >
                {domAppconfig}
            </ReactCSSTransitionGroup>
            </div>
        );
    }
}

【讨论】：

【解决方案2】：

您必须为 ReactCSSTransitionGroup 的所有子项提供 key 属性，即使只呈现单个项目也是如此。这就是 React 将如何确定哪些孩子进入、离开或留下的方式。

尝试将key="1" 之类的内容添加到<div id="app-config">，看看是否有帮助。

【讨论】：