时间戳

首页 > 解决方案 > React className 条件逻辑块从发生过渡，不知道为什么

javascript - React className 条件逻辑块从发生过渡，不知道为什么

问题描述

我正在尝试用 React 创建一个手风琴。我之前在 StackOverflow 上问过一个问题，即如何在单击时将类分配给手风琴并一次打开多个。有人将下面的代码沙箱链接到我，它将在点击时切换背景颜色。

https://codesandbox.io/s/nice-http-n0omm?file=/src/App.js

因此，我尝试将其放入我的代码中以打开和关闭手风琴，无论我做什么它都不会转换。这是一个即时的变化，我似乎无法弄清楚为什么。我也尝试过从蓝色到红色的背景颜色的过渡，同样的事情，它会立即改变而没有过渡。

有人可以查看我的代码并帮助解决吗？

我注意到代码沙箱和我的代码之间的唯一区别是，在沙箱版本上，在使用检查元素的 dom 上，当单击按钮时，只有选定的元素闪烁紫色（铬）以表示某些东西是改变了。在我的版本中，地图的每个实例都会闪烁紫色，表示所有映射出来的元素都受到了某种影响。

  const [accordionOpen, setAccordionOpen] = useState([]);


  function openAccordion(num) {
    setAccordionOpen((state) => {
      return state.includes(num)
        ? state.filter((n) => n !== num)
        : [...state, num];
    });
  }




return parsedData.map((data) => {
<>
<div
                className="mortgage_moreinfo"
                onClick={() => openAccordion(data.ProductCode)}
                key={data.ProductCode}
              >
                <p>More Info</p>
              </div>
</>
})

SCSS

.accordionClosed {
  transition: all 1s ease;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordionOpen {
  max-height: 101px !important;
}

标签： javascriptcssreactjs

解决方案

为你的 scss 尝试这样的事情：

.accordion {
  max-height: 0;
  overflow: hidden;
  transition: all 1s ease;
  transition: max-height 0.2s ease-out;
}

.accordion.open {
  max-height: 101px !important;
}

对于你的 React 组件：

 <div className=`accordion ${ConditionForOpeningTheAccordion ? 'open' : ''}`>
 </div>

所以你基本上有一个.accordion类，它定义了手风琴的基本风格，但你的高度为 0px。当您打开手风琴的条件得到满足时，您正在将.open类添加到宽度为 101 像素的手风琴中。这应该确保每次将.open类删除或添加到手风琴时都会播放您的过渡。

希望我的解释对你有所帮助。如果没有，我可以提供一个代码框或类似的东西。

推荐阅读