我有一個沒有高度屬性的容器（高度與填充它的內容一樣大），并且我正在更改該容器內的文本內容，這最終會更改高度。我試圖弄清楚如何在高度變化時在容器上放置過渡。我無法初始化容器的高度，因為 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;}
3 回答
MM們
TA貢獻1886條經驗 獲得超2個贊
您可以將項目包裝在段落元素中，將 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
TA貢獻1804條經驗 獲得超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;
}
白板的微信
TA貢獻1883條經驗 獲得超3個贊
一種方法是設置文本，然后設置樣式最大高度為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>
- 3 回答
- 0 關注
- 209 瀏覽
添加回答
舉報
0/150
提交
取消