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

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

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

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 上的最大高度时，它把所有东西都弄乱了，因为我不希望容器的高度为 0px； CSS:

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

Answer 3

您可以将项目包裹在段落元素中，将 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>

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

Height transition on container with unknown starting and ending heights in CSS

html

css

transition

css-transitions

reactjs