我是 React 和 Material UI 新手,所以请耐心等待:P
我想做的是,有一张卡片可以随着内容的变化动态改变高度。根据文档,这应该自动发生,而且确实如此,但我希望高度动画到新值。
所以这是相关代码:
var SomeAwesomeComponent = React.createClass({
getInitialState: function(){
return {
text: 'Test'
}
},
componentDidMount: function(){
var self = this;
setInterval(function(){
self.setState({
text: 'Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello '
})
},2000)
},
render: function() {
var cardStyle = {
transition: '1s'
}
return (
<div>
<Card>
<CardText transitionEnabled={true} style={{cardStyle}}>
{this.state.text}
</CardText>
</Card>
</div>
);
}
});
我看到的是,高度发生了变化,但它跳到了新值。我希望它“过渡”到新值。 文档说这可以使用“transitionEnabled”来完成,但我似乎无法让它工作。有人可以帮忙吗?
谢谢
所以我找到了一个有效的解决方案。
这更多的是 CSS 问题,而不是 React/Material-UI。
您必须在卡的两种状态下明确设置高度(并且不能是“自动”)。我所做的是,我将高度保存为组件的状态,并在我希望它展开时(当我更改文本时)更新它。
这里:
getInitialState: function(){
return {
text: 'Test',
height: '10vh'
}
},
componentDidMount: function(){
var self = this;
setInterval(function(){
self.setState({
text: 'Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello ',
height: '15vh'
})
},2000)
},
render: function() {
var cardStyle = {
display: 'block',
width: '80vw',
transitionDuration: '0.3s',
height: this.state.height
}
return (
<div>
<Card style={cardStyle}>
<CardText>
{this.state.text}
</CardText>
</Card>
</div>
);
我很确定这不是最好的方法,所以如果有人知道更好的解决方案,请告诉我。
谢谢:)
我也遇到了这个问题。我的方法是在外部 Card 元素上添加 onExpandChange 事件,通过回调方法,您可以设置可扩展元素的可见性状态。然后你可以在 Jake 的答案中执行类似 [https://stackoverflow.com/a/8331169/3246854] 的操作来切换和缓入/缓出元素。通过这种方式,您可以在可扩展元素上设置自动高度。
唯一的缺点是缓出过渡会出现短暂的延迟,因为过渡是在最大高度而不是实际高度上完成的。只要相应地调整缓出速度就没什么大不了的。
在我写这篇文章时我正在使用版本 0.14.4。
onExpandChange = (x) => {
this.setState({showDetails: x})
}
render() {
var on_show_styles = {maxHeight: "2000px", transition: "max-height 1s ease-in"};
var on_hide_styles = {maxHeight: "0", transition: "max-height 0.15s ease-out", overflow: "hidden"};
return (
<Card onExpandChange={this.onExpandChange}>
<CardHeader
title="I lost my rubber duck"
subtitle="Click here to help me find it"
actAsExpander={true}
showExpandableButton={true}
/>
<CardText style={this.state.showDetails ? on_show_styles : on_hide_styles}>
<div>
<p><b>Description:</b></p>
<p>Here are the details about my rubber duck</p>
</div>
</CardText>
</Card>
)
}
要根据内容更改获取 CardText 的自动高度,您需要将 Overflow: ‘auto’ 设置为 CardText 的内联样式,如下所示。
<CardText style={{overflow: ‘auto’}}>
Sample text
</CardText>
你必须在两者上隐藏溢出。
let on_show_styles = {maxHeight:“200px”,transition:“最大高度1s缓入”,overflow:“隐藏”}; 让 on_hide_styles = {maxHeight: "0px", 过渡: "最大高度 1s 缓出", 溢出: "隐藏"};