反应 useState() - 没有 css 转换？只是跳到没有动画/过渡的新课程

Question

我有一个用 React 的useState() 设置的条件类，不知何故，转换不是针对的。它只是跳转到新的类值。

在下面的代码示例中，我试图使其尽可能干净。 随着线 className={`collapse my-navbar-collapse ${toggle ? "show" : ""}`}我设置了班级。

我在这里错过了什么？

header.js

import React, { useState } from "react"
import "./header.sass"

const Header = () => {
  const [toggle, setToggle] = useState(false)

  return (
    <div className={'sticky-top'}>

      <button
        className="btn navbar-toggler"
        type="button"
        onClick={ () => setToggle(!toggle) }
      >
        button stuff
      </button>

      <div className={`collapse my-navbar-collapse ${toggle ? "show" : ""}`}>
        rest of my stuff
      </div>

    </div>

  )
}

export default Header

header.sass

.my-navbar-collapse
  background-color: red
  transition: all 2s ease
  height: 0

  &.show
    height: 100vh

（当一切正常时，我会将transition: all 2s ease 从all 更改为height。我只想先为这个测试捕获每一个 :)

Answer 1

正如您从这个演示中看到的那样，我在高度过渡方面没有任何问题。

但是，您似乎忘记了 CSS 中的 overflow: hidden。您需要这个，因为默认情况下，css 会尝试确保即使样式混乱也不会丢失任何内容，因此为了在您的导航栏折叠时隐藏“我的其余内容”文本，您需要确保隐藏它.

看起来问题出在折叠类中。 Bootstrap 的 transitions.css 通过该类添加 display: none。如果没有显示，则 css 无法正确转换。因此问题。

该示例现在有 2 个按钮，一个触发具有折叠类的 div，另一个 div 没有它。

const Header = () => {
  const [toggle, setToggle] = React.useState(false);
  const [toggle2, setToggle2] = React.useState(false);
  return (
    <div className={'sticky-top'}>
      <button
        className="btn navbar-toggler"
        type="button"
        onClick={() => setToggle(!toggle)}
      >
        button stuff - collapse
      </button>

      <div className={`collapse my-navbar-collapse ${toggle ? 'show' : ''}`}>
        rest of my stuff
      </div>
      <button
        className="btn navbar-toggler"
        type="button"
        onClick={() => setToggle2(!toggle2)}
      >
        button stuff - no collapse
      </button>

      <div className={`my-navbar-collapse ${toggle2 ? 'show' : ''}`}>
        rest of my stuff
      </div>
    </div>
  );
};
ReactDOM.render(<Header />, document.querySelector('#root'));

.my-navbar-collapse {
  background-color: red;
  transition: height 2s ease;
  height: 0;
  overflow: hidden;
}

.my-navbar-collapse.show {
  height: 100vh;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root" />