CSS 转换在删除类时起作用，在添加类时不起作用

Question

在我的 React 项目中，我尝试使用 css 过渡显示隐藏元素 我有一个按钮，当我单击它时，会添加一个类

expand

，当我重新单击它时，该类会被删除

这是我的代码

export const ProjectsSection = () => {
     const [extend, setExtend] = useState(false);
  const handleClick = () => {
    setExtend(!extend); // Toggle the expand state between true and false
  };

  return (
    <section className="projects bg-dark">
      <div className="container">
        <div className="heading text-center ">
          <span className="text-capitalize ">latest work</span>
          <h2 className="text-white">
            Explore My Popular <span>Projects</span>
          </h2>
        </div>
        <div className={`row mt-5 ${extend ? "extend" : ""}`}>
          {ProjectsData.map((project, i) => (
            <Project
              key={i}
              projectName={project.projectName}
              projectImg={project.projectImg}
              projectLink={project.projectLink}
            />
          ))}
        </div>
        <div className="mt-5 text-center ">
          <button
            className="theme-btn show-more border-0 "
            onClick={handleClick}
          >
            Show More
            <FontAwesomeIcon icon={faChevronRight} className="arrow" />
          </button>
        </div>
      </div>
    </section>
  );
};

这就是CSS

.projects .row {
  max-height: 40.625rem;
  overflow: hidden;
  transition: max-height 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.projects .row.extend {
  max-height: 85rem;
  overflow: visible;
}

问题是只有当类

extend

被删除时才会出现转换，而当类

extend

被添加时没有转换 我使用

max-height

进行过渡

我尝试使用

transition-delay

这也没有帮助

我也尝试使用

.projects .row {
height: 40.625rem;
  max-height: 40.625rem;
  overflow: hidden;
  transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.projects .row.extend {
height: 85rem;
  max-height: 85rem;
  overflow: visible;
}

这也没有帮助

我该如何解决这个问题，当添加类

extend

和删除类

extend

时会出现过渡

Answer 1

一旦删除类，该元素的

visibility

属性就会设置为

hidden

。它的转换仍然适用，但它是隐藏的，所以你不会看到它。

visibility

属性是可动画的，但因为它是离散的，所以只会在中途交换值。我喜欢在代码中利用这一点的方式是设置一个 CSS 动画，使元素在一段时间内保持可见。例如：

@keyframes stayVisible {
    from { visibility: visible; }
      to { visibility: visible; }
}

.element {
    overflow: hidden;
    animation: 0.3s stayVisible;
}

这可以让您告诉元素在设定的持续时间后从

visibility: visible;

交换到

visibility: hidden;

，例如在足够长的时间完成转换后。

尝试将其用于最初需要隐藏的元素可能会给您带来一些麻烦，因为动画将在首次渲染时运行，因此您可能需要使用单独的类来保持其可见并同时应用它删除

.extend

课程的时间。