使用 Bulma 在 React Collapse 中平滑过渡

Question

我一直在用 Bulma 构建这个 React Collapse，但我正在努力让它看起来很流畅。正如您在下面的 fiddle 中看到的那样，card-content 具有此填充，因此当卡片折叠时我需要将其设为 0，但这会使过渡看起来很奇怪。有什么办法可以解决吗？

我创建了这个 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

我做到了。其实很简单，但是对于任何有同样疑问的人来说，就是下面的固定代码部分。我所要做的就是将 style 移动到更高级的 div，它没有链接到预定义的 card-content 的填充。

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

使用 Bulma 在 React Collapse 中平滑过渡

Smooth transition in a React Collapse with Bulma

css

sass

accordion

reactjs

bulma