Smooth transition in a React Collapse with Bulma

Question

I've been building this React Collapse with Bulma, but I'm struggling to make it look smooth. As you can see in the fiddle below, the card-content has this padding, so I need to make it 0 when the card is collapsed, but this makes the transition look weird. Is there any way to fix it?

I created this JSFiddle so it's easier to reproduce. You can also see in fullscreen here.

class Collapse extends React.Component {
  constructor(props) {
    super(props)
    this.state = { cardState: false }
    this.toggleCardState = this.toggleCardState.bind(this)
  }

  toggleCardState() {
    this.setState({ cardState: !this.state.cardState })
  }

  render() {
    const { title, children } = this.props
    const { cardState } = this.state

    return (
      <div className="column is-6">
        <div className="card" aria-hidden={cardState ? "false" : "true"}>
          <header
            className="card-header"
            style={{ cursor: "pointer" }}
            onClick={this.toggleCardState}>
            <p className="card-header-title">{title}</p>
            <a className="card-header-icon">
              <span
                className="icon"
                style={{
                  transform: cardState ? null : "rotate(180deg)",
                  transition: "transform 250ms ease-out",
                }}>
                <i className="fa fa-angle-up"></i>
              </span>
            </a>
          </header>
          <div
            className="card-content"
            style={{
              maxHeight: cardState ? 1000 : 0,
              padding: cardState ? null : 0,
              overflow: "hidden",
              transition: "max-height 250ms ease",
              transition: "padding 250ms ease",
            }}>
            <div className="content">{children} </div>
          </div>
        </div>
      </div>
    )
  }
}

Collapse.propTypes = {
  title: React.PropTypes.string.isRequired,
}

class App extends React.Component {
  render() {
    return (
      <section className="section">
        <div className="container">
          <div className="columns is-multiline">
            <Collapse title="Title 1">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Suspendisse elementum mauris et porta mattis.
              </p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Suspendisse elementum mauris et porta mattis.
              </p>
            </Collapse>
            <Collapse title="Title 2">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Suspendisse elementum mauris et porta mattis.
              </p>
            </Collapse>
          </div>
        </div>
      </section>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("app"))

Answer 1

I managed to do it. It was quite simple actually, but for anyone who is having the same doubt, that is the fixed code part below. All I had to do was to move the style to a superior div, which isn't linked to the predefined card-content's padding.

<div
  className="card-body"
  style={{
    maxHeight: cardState ? "100em" : "0em",
    overflow: "hidden",
    transition: "max-height 200ms ease-in-out",
  }}
>
  <div className="card-content">
    <div className="content">{children}</div>
  </div>
</div>