Javascript React useState（）-没有css转换？只需跳转到新类，无需动画/转换

我有一个条件类，它是用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

---

（当一切正常时，我将把

转换：所有2个2从
all
变为
height
。我只想先抓住这个测试的每一个：）
从这个演示中可以看出，我对高度转换没有任何问题

但是，看起来您忘记了css中的溢出：隐藏。您需要这样做，因为默认情况下，css会尝试确保即使在样式混乱的情况下也不会丢失任何内容，因此为了在收拢导航栏时隐藏“我的其他内容”文本，您需要确保将其隐藏

看起来问题在崩溃类中。Bootstrap的transitions.css通过该类添加
display:none
。如果没有显示，则css无法正确转换。这就是问题所在

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


const头=（）=>{
const[toggle，setToggle]=React.useState（false）；
const[toggle2，setToggle2]=React.useState（false）；
返回(
setToggle（！toggle）}
>
按钮-折叠
我其余的东西
setToggle2（！toggle2）}
>
按钮的东西-没有崩溃
我其余的东西
);
};
ReactDOM.render（，document.querySelector（'#root'）
。我的导航栏折叠{
背景色：红色；
过渡：高度2秒；
身高：0；
溢出：隐藏；
}
.my-navbar-collapse.show{
高度：100vh；
}

React部分在我看来很好，我想问题出在CSS中，类
collapse
呢？你检查过了吗？@Makan，是的，就是它。我将引导方法改为自己的方法。但是
折叠
和
显示
（肯定是组合）问题所在。删除了类并添加了新的唯一类，它的动画效果很好。（不是很流畅，但很有效）如果你能加上它作为答案，我会接受的。谢谢不，现在不见了。等等，什么？它工作了几年。现在不是：）：）几个撤销和重做，我找不到。。。我猜不是折叠类你可能想在所讨论的div上使用chrome的computed properties devtool，看看是否有什么东西覆盖了你正在设置的转换。你也可以放！重要信息，请在转换后查看是否修复。@Tim它发生了：）谢谢您的示例！正如@Makan所提到的，错误出现在bootstrap的
collapse
类和我的代码的组合中。但是，
溢出
确实有帮助：）看起来像是引导程序的折叠类。它添加了
display:none
@Tim如果你在我更新它之后还没有看到它，你应该能够确保你的div没有display:none谢谢，似乎是react的其他内容。我已经交换了所有的类名，以确保它不会干扰其他内容。但没有成功。它只是有时起作用。有时不是。刚刚刷新页面。不改变代码。它被包装在一个
useContext（）
hook中。这听起来像是另外一个问题，正如所演示的，您提供给我们的基本部分已经工作了。我可能会建议制作一个可复制的示例，说明它在代码沙箱或类似的环境中不起作用，并为它设置一个新问题。如果您从工作示例开始并添加到停止，它也可能会让您了解出了什么问题。
.my-navbar-collapse
  background-color: red
  transition: all 2s ease
  height: 0

  &.show
    height: 100vh