Question

我有一个动画组件，根据道具（真或假）向上/向下滑动。我使用 maxHeight：0 来隐藏组件（使用CSS完成转换），并且这是作为prop传递的默认状态。对于打开的样式，我使用比需要大得多的 maxHeight ，以确保内容适合。打开之后，我可以通过参考来获得高度，并相应地设置 maxHeight 。

export default class AnimatedInput extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      height: 600
    }
  }
  componentDidUpdate(prevProps) {
    var height = this.refs.inputNode ? this.refs.inputNode.clientHeight : height;
    console.log(height);
    if (this.props.open === false && prevProps.open === true) {
      this.setState({height: height});
    }
  }
  render () {
    var {height} = this.state;
    let test = this.props.open ? 'boxVisible' : 'boxHidden';
    var styles = {
      boxHidden: {
        ...
        maxHeight: 0,
      },
      boxVisible: {
        ....
        maxHeight: height,
      }
    }

    return (
      <div style={styles[test]} ref="inputNode">
        {this.props.children}
      </div>
    )
  }
}

这种方法存在两个问题：

第一次打开和关闭是不平滑的，因为maxHeight比它应该大（可能会在屏幕外渲染打开的那个并首先得到它的高度？）
如果在完全打开之前关闭它的高度将低于应该的高度（我认为这很容易解决 - 只需要停止更新高度值）。

我是否在正确的轨道上？你会如何解决这些问题？我应该坚持使用CSS还是完全使用JS进行转换。谢谢你的建议！

Answer 1

您正在寻找ReactCSSTransitionGroup。我用这个就完全一样了。

在屏幕上显示之前获取渲染元素高度（ReactJS）

1 个答案: