reactjs - 如何在 Material-UI (React) 中设置卡片高度的动画

Question

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

谢谢

Answer 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>
    );

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

谢谢:)