Question

我试图为基于状态道具隐藏/显示的某些内容创建一个简单的“向下滑动”动画。内容是动态的，因此高度未知。

这是我尝试过的。另请参见此code sandbox

Process.StandardError

我的风格：

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

class Some extends React.Component {
  state = {
    showMore: false
  }
  render() {
    const {showMore} = this.state;
    return (
      <div>
        <div>
          <h1>Hej verden</h1>
          <ReactCSSTransitionGroup transitionName="example"
            transitionEnterTimeout={500}
            transitionLeaveTimeout={300}>

          {showMore && 
            <p key={1}>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p>
          }

          </ReactCSSTransitionGroup>
        </div>
        <button onClick={this.handleClick}>Click</button>
      </div>
    )
  }
  handleClick = () => {
    this.setState({showMore: !this.state.showMore})
  }

}

export default Some

我尝试了以下操作，但无济于事：

设置初始高度为0
使用了绝对的px高度值（尽管不适用于动态内容）
使用了.App { font-family: sans-serif; text-align: center; } .example-enter { height: 0; } .example-enter.example-enter-active { height: 100%; transition: height 500ms ease; } .example-leave { height: 100%; } .example-leave.example-leave-active { height: 0; transition: height 300ms ease; }的高度
使用了!important而不是max-height

如何使lorem ipsum内容从高度0滑落到全高？

Answer 1

我通过添加带有overflow: hidden的基类解决了这个问题。

如以下example所示。

如果没有overflow: hidden，似乎根本就不会发生过渡。

ReactCSSTransitionGroup不动画高度

1 个答案: