CSS 中起始和结束高度未知的容器上的高度过渡

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

}


慕标5832272
浏览 58回答 3
3回答

MM们

您可以将项目包装在段落元素中,将 div 的高度设置为 0,并隐藏溢出。注入文本后,您可以将 div 的高度设置为段落的高度。<!DOCTYPE html><html>&nbsp; <head>&nbsp; &nbsp; <title>ok.</title>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; div {&nbsp; &nbsp; &nbsp; &nbsp; outline: 1px solid black;&nbsp; &nbsp; &nbsp; &nbsp; transition-property: height;&nbsp; &nbsp; &nbsp; &nbsp; transition-duration: 1s;&nbsp; &nbsp; &nbsp; &nbsp; height: 0;&nbsp; &nbsp; &nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; p {&nbsp; &nbsp; &nbsp; &nbsp; margin:0;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style>&nbsp; </head>&nbsp; <body>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <p>Item 1</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <button id="button1">insert short</button>&nbsp; &nbsp; <button id="button2">insert long</button>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; let div = document.getElementsByTagName("div")[0]&nbsp; &nbsp; &nbsp; let para = document.getElementsByTagName("p")[0]&nbsp; &nbsp; &nbsp; let button = document.querySelector("#button1")&nbsp; &nbsp; &nbsp; button.addEventListener("click", function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; para.innerHTML ="oneliner"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; div.style.height = para.scrollHeight +"px"&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; let button2 = document.querySelector("#button2")&nbsp; &nbsp; &nbsp; button2.addEventListener("click", function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; para.innerHTML ="tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, \&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo \&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse \&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non \&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; proident, sunt in culpa qui officia deserunt mollit anim id est laborum."&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; div.style.height = para.scrollHeight +"px"&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; </script>&nbsp; </body></html>

慕婉清6462132

进行了一些更改以尝试找到解决方案,但它仍然无法像这样工作......import React, { Component } from "react";export default class Test extends Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; text: "Item 2"&nbsp; &nbsp; };&nbsp; }&nbsp; componentDidMount() {&nbsp; &nbsp; const height = this.divElement.clientHeight;&nbsp; &nbsp; this.divElement.style.maxHeight = height + "px";&nbsp; }&nbsp; changeText = () => {&nbsp; &nbsp; this.setState(&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; text:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "A much longer text@@@@@@@ @@@@@@@ @@@@@@ @@@@@@@@ @@@@@ @@@@ @@@@@@ @@@@ @@@@@ @@@@@@ @@@@@@@ @@@@@@@@@@ @@@@ @@@@ @@@@@@@@@@@@@@@!",&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; () => {&nbsp; &nbsp; &nbsp; &nbsp; this.divElement.style.maxHeight = null;&nbsp; &nbsp; &nbsp; &nbsp; const height = this.divElement.clientHeight;&nbsp; &nbsp; &nbsp; &nbsp; this.divElement.style.maxHeight = height + "px";&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; );&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div style={{ margin: "200px" }}>&nbsp; &nbsp; &nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ref={(divElement) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.divElement = divElement;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="text"&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="item1">Item 1</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="item2">{this.state.text}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="item3">Item 3</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={this.changeText}>Click</button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}另外,当我取消注释 .text 上的 max-height 时,它会搞乱一切,因为我不希望容器的高度为 0px;CSS:.text {&nbsp; background-color: yellow;&nbsp; max-width: 300px;&nbsp; transition: all 3s ease-out;&nbsp; // max-height: 0;}

白板的微信

一种方法是设置文本,然后设置样式最大高度为scrollheight;因此,作为测试,每次单击“添加”时,都会添加新文本以使其更高。var btn = document.querySelector(".add");btn.addEventListener("click",function(){&nbsp; var _text = document.querySelector(".text");&nbsp; _text.innerHTML += "text<BR><BR>adsad<br>sadasd";&nbsp; _text.style.maxHeight = _text.scrollHeight + "px";});.text {&nbsp; background-color: yellow;&nbsp; max-width: 300px;&nbsp; transition: all 1s ease-out;&nbsp; max-height:0;}<button type="button" class="add">Add</button><div class="text"></div>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5