React useState() - 没有 css 转换？只是跳转到新的 class 没有 animation/transition

Question

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

在下面的代码示例中，我已尽量使其符合我的情况。随着线 className={`collapse my-navbar-collapse ${toggle ? "show" : ""}`} 我设置了 class.

我在这里错过了什么？

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 试图确保即使弄乱样式也不会丢失任何东西，所以为了在你的导航栏折叠时隐藏 "rest of my stuff" 文本，你需要确保隐藏它。

看来问题是崩溃了class。 Bootstrap 的 transitions.css 通过 class 添加 display: none。如果没有显示，则 css 无法正常转换。因此这个问题。

示例现在有 2 个按钮，一个触发具有折叠 class 的 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" />

React useState() - 没有 css 转换？只是跳转到新的 class 没有 animation/transition

React useState() - no css transitions? Just jumps to new class without animation/transition

javascript

css

reactjs

react-hooks

use-state