CSS中具有未知开始和结束高度的容器上的高度转换答案

【问题标题】：Height transition on container with unknown starting and ending heights in CSSCSS中具有未知开始和结束高度的容器上的高度转换
【发布时间】：2020-07-30 07:32:15
【问题描述】：

我有一个没有高度属性的容器（高度与填充它的内容一样大），我正在更改该容器中的文本内容，这最终会改变高度。我试图弄清楚如何在高度变化时在容器上放置一个过渡。 我无法在容器上初始化高度，因为 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;
}

【问题讨论】：

标签： html css reactjs css-transitions transition

【解决方案1】：

您可以将项目包装在段落元素中，将 div 的高度设置为 0，并隐藏溢出。注入文本后，您可以将 div 的高度设置为段落的高度。

<!DOCTYPE html>
<html>
  <head>
  	<title>ok.</title>
  	<style>
      div {
        outline: 1px solid black;
        transition-property: height;
        transition-duration: 1s;
        height: 0;
        overflow: hidden;
      }
      p {
        margin:0;
      }
  	</style>
  </head>
  <body>
    <div>
      <p>Item 1</p>
    </div>
    <button id="button1">insert short</button>
    <button id="button2">insert long</button>
    <script>
      let div = document.getElementsByTagName("div")[0]
      let para = document.getElementsByTagName("p")[0]
      let button = document.querySelector("#button1")
      button.addEventListener("click", function() {
            para.innerHTML ="oneliner"
            div.style.height = para.scrollHeight +"px"
      })
      let button2 = document.querySelector("#button2")
      button2.addEventListener("click", function() {
            para.innerHTML ="tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, \
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo \
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse \
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non \
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            div.style.height = para.scrollHeight +"px"
      })
    </script>
  </body>
</html>

【讨论】：

【解决方案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 上的最大高度时，它会搞砸一切，因为我不希望容器的高度为 0px； CSS：

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

【讨论】：

【解决方案3】：

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

所以作为一个测试，每次点击添加时，都会添加新文本以使其更高。

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>

【讨论】：

我更新了我的应用程序，以尽可能地适应您正在做的事情，但由于某种原因，它仍然没有过渡。我将在下面的另一条评论中发布我的新代码