Question

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

我创建了这个JSFiddle，因此更易于复制。您还可以全屏查看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>

使用布尔玛实现React崩溃时的平滑过渡

1 个答案: