如何在 Material-UI (React) 中为卡片高度设置动画答案

【问题标题】：How do I animate card height in Material-UI (React)如何在 Material-UI (React) 中为卡片高度设置动画
【发布时间】：2015-09-18 00:26:42
【问题描述】：

我是 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”来完成，但我似乎无法让它工作。任何人都可以帮忙吗？

谢谢

【问题讨论】：

标签： reactjs material-design

【解决方案1】：

所以我找到了一个可行的解决方案。

这更像是一个 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>
    );

我很确定这不是最好的方法，所以如果有人知道更好的解决方案，请告诉我。

谢谢:)

【讨论】：

【解决方案2】：

我也遇到了这个问题。我的方法是在外部 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>
  )
}

【讨论】：

我也必须将overflow: "hidden" 添加到我的on_show_styles，否则我的内容会在动画赶上时显示在卡片之外。我喜欢您仍在使用 card/cardHeader 的内置可扩展功能。

【解决方案3】：

要根据内容更改获取 CardText 的自动高度，您需要将 overflow:'auto' 设置为 CardText 的内联样式，如下所示。

<CardText style={{overflow: ‘auto’}}>
     Sample text
</CardText>

【讨论】：