我有一个没有高度属性的容器（高度与填充它的内容一样大），并且我正在更改该容器内的文本内容，这最终会更改高度。我试图弄清楚如何在高度变化时在容器上放置过渡。我无法初始化容器的高度，因为 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 关注
- 52 浏览
添加回答
举报
0/150
提交
取消