Плавный переход в React Collapse с Bulma - PullRequest
Новая
       57

Плавный переход в React Collapse с Bulma

0 голосов
/ 11 июля 2020

Я создавал этот React Collapse с Bulma, но изо всех сил стараюсь, чтобы он выглядел гладко. Как вы можете видеть на скрипте ниже, у card-content есть это заполнение, поэтому мне нужно сделать его равным 0, когда карта свернута, но это делает переход странным. Есть ли способ исправить это?

Я создал это JSFiddle , чтобы его было легче воспроизвести. Вы также можете увидеть в полноэкранном режиме здесь . 

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

1 Ответ

0 голосов
/ 13 июля 2020

Мне удалось это сделать. На самом деле это было довольно просто, но для всех, кто испытывает такие же сомнения, это фиксированная часть кода ниже. Все, что мне нужно было сделать, это переместить 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>
...