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浏览 132回答 3
3回答
-
MM们
您可以将项目包装在段落元素中，将 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> -
慕婉清6462132
进行了一些更改以尝试找到解决方案，但它仍然无法像这样工作......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;} -
白板的微信
一种方法是设置文本，然后设置样式最大高度为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>
随时随地看视频慕课网APP
相关分类
Html5