Question

对这个问题的简单性表示歉意，但我是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转换。

互联网

Answer 1

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

＆＃34;警告：propType失败：未提供transitionEnterTimeout   ReactCSSTransitionGroup：这会导致不可靠的动画和   在React的未来版本中不会得到支持。看到   xxx更多   信息。检查Demo。＆＃34;
的渲染方法
＆＃34;警告：失败   propType：不提供transitionLeaveTimeout   ReactCSSTransitionGroup：这会导致不可靠的动画和   在React的未来版本中不会得到支持。看到   xxx更多   信息。检查Demo。＆＃34;
的渲染方法

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

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都采用代表转换持续时间的数字（以毫秒为单位），因此＆＃34; 300＆＃34;对于.3秒的转换，它与您指定的CSS转换相匹配。

反应CSS过渡组，不工作？

1 个答案: