容器上的高度转换，CSS中的起始和结束高度未知

Question

我有一个没有高度属性的容器（高度与填充它的内容一样大，并且我正在更改该容器内的文本内容，最终改变了高度。我试图弄清楚如何在高度变化时在容器上放置过渡。 我无法初始化容器的高度，因为this.state.text将是动态的，并且要更改为的文本也将是动态的。我现在拥有的当前代码未显示任何过渡当容器的高度改变时。这是一个简单的示例，向您展示我在说什么。

这里是组件：

import React, { Component } from "react";

export default class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "Item 2",
    };
  }

  changeText = () => {
    this.setState({
      text:
        "A much longer text@@@@@@@ @@@@@@@ @@@@@@ @@@@@@@@ @@@@@ @@@@ @@@@@@ @@@@ @@@@@ @@@@@@     @@@@@@@ @@@@@@@@@@ @@@@ @@@@ @@@@@@@@@@@@@@@!",
    });
  };

  render() {
    return (
      <div>
        <div className="text">
          <div className="item1">Item 1</div>
          <div className="item2">{this.state.text}</div>
          <div className="item3">Item 3</div>
        </div>
        <button onClick={this.changeText}>Click</button>
      </div>
    );
  }
}

这里是CSS：

.text {
  background-color: yellow;
  max-width: 300px;
  transition: all 3s ease-out;
}

Answer 1

一种方法是设置文本，然后将样式的最大高度设置为scrollheight；

因此，作为测试，每次单击添加时，都会添加新文本以使其更高。

var btn = document.querySelector(".add");

btn.addEventListener("click",function(){
  var _text = document.querySelector(".text");
  _text.innerHTML += "text<BR><BR>adsad<br>sadasd";
  _text.style.maxHeight = _text.scrollHeight + "px";
});

.text {
  background-color: yellow;
  max-width: 300px;
  transition: all 1s ease-out;
  max-height:0;
}

<button type="button" class="add">Add</button>
<div class="text"></div>

Answer 2

进行了一些更改以尝试找到一种解决方案，但是它仍然不能像这样...

import React, { Component } from "react";

export default class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "Item 2"
    };
  }

  componentDidMount() {
    const height = this.divElement.clientHeight;
    this.divElement.style.maxHeight = height + "px";
  }

  changeText = () => {
    this.setState(
      {
        text:
          "A much longer text@@@@@@@ @@@@@@@ @@@@@@ @@@@@@@@ @@@@@ @@@@ @@@@@@ @@@@ @@@@@ @@@@@@ @@@@@@@ @@@@@@@@@@ @@@@ @@@@ @@@@@@@@@@@@@@@!",
      },
      () => {
        this.divElement.style.maxHeight = null;
        const height = this.divElement.clientHeight;

        this.divElement.style.maxHeight = height + "px";
      }
    );
  };

  render() {
    return (
      <div style={{ margin: "200px" }}>
        <div
          ref={(divElement) => {
            this.divElement = divElement;
          }}
          className="text"
        >
          <div className="item1">Item 1</div>
          <div className="item2">{this.state.text}</div>
          <div className="item3">Item 3</div>
        </div>
        <button onClick={this.changeText}>Click</button>
      </div>
    );
  }
}

另外，当我取消注释.text上的max-height时，它会使所有内容混乱，因为我不希望容器的高度为0px；CSS：

.text {
  background-color: yellow;
  max-width: 300px;
  transition: all 3s ease-out;
  // max-height: 0;
}