css - ReactCSSTransitionGroup 没有动画高度

Question

我正在尝试为一些基于状态 Prop 隐藏/显示的内容创建一个简单的“向下滑动”动画。内容是动态的，所以高度是未知的。

这是我试过的。另见 code sandbox

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

我的风格:

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

我尝试了以下但没有任何效果:

• 设置初始高度为0

• 使用绝对 px 值作为高度(尽管它不适用于动态内容)

• 在高度上使用了 !important

• 使用 max-height 代替 height

如何使 lorem ipsum 内容从高度“向下滑动”:0 到全高？

Answer 1

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

如下所示example .

如果没有 overflow: hidden，转换似乎根本没有发生。