How do I animate card height in Material-UI (React)

Question

I'm new to React and Material UI, so please bear with me :P

What I want to do is, have a card that dynamically changes height as the content changes. According to the docs, this should happen automatically, and it does, but I want the height to animate to the new value.

So this is the relevant code:

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

});

What I can see is, the height changes, but it jumps to the new value. I want it to 'transition' to the new value. The docs say this can be done using 'transitionEnabled', but I can't seem to get it to work. Can anyone help?

Thanks

score 4 · Accepted Answer · answered Jul 01 '15 at 03:10

So I found a solution that works.

It was more of a CSS issue than React/Material-UI.

You have to explicitly set the heights in both states of the card (and it cannot be 'auto'). What I did was, I saved the height as a state of the component, and updated it when I wanted it to expand (when I changed the text).

Here:

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

I'm pretty sure this is not the best way to do this, so if anyone knows a better solution, do let me know.

Thanks :)

score 3 · Answer 2 · edited May 23 '17 at 12:24

I ran into this issue as well. My way is to add an onExpandChange event on the outer Card element, from the callback method you can set the visibility state on your expandable elements. Then you can do something like [https://stackoverflow.com/a/8331169/3246854] in Jake's answer to toggle and ease in/out the elements. Doing it this way allows you to set auto height on the expandable element.

The only drawback is the ease-out transition will appear to have a short delay since the transition is done on the max-height rather than the actual height. Its not a big deal as long as you adjust the ease-out speed accordingly.

I am using the version 0.14.4 as of the time I wrote this.

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>
  )
}

I had to add `overflow: "hidden"` to my `on_show_styles` too, otherwise my content would show outside the card while the animation caught up. I like that you're still making use of the built in expandable functionality of the card/cardHeader. — ericf89, Jul 06 '16 at 13:17

score 0 · Answer 3 · answered Feb 09 '18 at 10:10

0

To take auto height of CardText based on content changes you need to set overflow: ‘auto’ as inline style to CardText like below.

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

answered Feb 09 '18 at 10:10

Hemadri Dasari

32,666
37
119
162

score 0 · Answer 4 · edited Aug 31 '23 at 15:52

0

You have to do the overflow hidden on both.

let on_show_styles = {maxHeight: "200px", transition: "max-height 1s ease-in", overflow: "hidden"};
let on_hide_styles = {maxHeight: "0px", transition: "max-height 1s ease-out", overflow: "hidden"};

edited Aug 31 '23 at 15:52

toyota Supra

3,181
4
15
19

answered Aug 31 '23 at 14:53

Roy Fagon

1
1

How do I animate card height in Material-UI (React)

4 Answers4