0

为这个问题的简单性道歉，但我是 React 的新手，并试图实现一个简单的 CSSTransitionGroup 来隐藏/显示一个元素，但带有淡入淡出、幻灯片等。文档看起来非常简单，但出于某种原因，下面的代码对我不起作用。

虽然 .box 在存在与否之间切换，但我在进入和离开时没有看到任何 CSS 转换。

class Demo extends React.Component{
    constructor(props) {
        super(props);
        this.state = { visible: false };
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState({ visible: ! this.state.visible });
    }

    render() {
        return <div>
            <button onClick={this.handleClick}>{this.state.visible ? 'Slide up' : 'Slide down'}</button>
            <ReactCSSTransitionGroup transitionName="example">
                { this.state.visible ? <div className='box' /> : null }
            </ReactCSSTransitionGroup>
        </div>
    }
}

.box {
  width: 200px;
  height: 100px;
  background: green;
  margin-top: 10px; }

.example-enter {
  height: 0px; }

.example-enter.example-enter-active {
  height: 100px;
  -webkit-transition: height .3s ease; }

.example-leave.example-leave-active {
  height: 0px;
  -webkit-transition: height .3s ease; }

我一定是做错了什么，因为我可以在其他在线示例中看到这个基本演示，但无法复制自己。请让我知道如何获得我的 CSS 过渡。

谢谢互联网

4

1 回答 1

2

您是否检查了控制台的错误输出？因为当我运行你的代码时，我得到了这个：

“警告：失败的 propType：transitionEnterTimeout 未提供给 ReactCSSTransitionGroup：这可能会导致动画不可靠，并且在 React 的未来版本中将不再支持。有关更多信息，请参阅 xxx。检查 的渲染方法Demo。”

“警告：失败的 propType：transitionLeaveTimeout 未提供给 ReactCSSTransitionGroup：这可能导致不可靠的动画，并且在 React 的未来版本中将不再支持。有关更多信息，请参阅 xxx。检查 的渲染方法Demo。”

添加两个缺少的道具，它工作正常。

class Demo extends React.Component{
    constructor(props) {
        super(props);
        this.state = { visible: false };
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState({ visible: ! this.state.visible });
    }

    render() {
        return <div>
            <button onClick={this.handleClick}>{this.state.visible ? 'Slide up' : 'Slide down'}</button>
            <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={300} transitionLeaveTimeout={300} >
                { this.state.visible ? <div className='box' /> : null }
            </ReactCSSTransitionGroup>
        </div>
    }
}

transitionEnterTimeout并且transitionLeaveTimeout两者都采用一个数字表示过渡的持续时间（以毫秒为单位），因此“300”表示 0.3 秒的过渡，这与您指定的 CSS 过渡相匹配。

于 2017-03-20T21:31:35.093 回答