React中如何为布尔值控制切换的div组件添加同步淡入淡出效果

你当前的实现存在两个核心问题，导致无法实现预期的淡入淡出效果：

1. 直接使用三元运算符条件渲染组件，切换时旧组件会被立即销毁，没有机会执行fadeOut动画
2. 仅给fullPage、halfPage类绑定了fadeIn入场动画，没有处理切换时的退场动画逻辑

你可以参考以下修改方案实现需求：

CSS修改 #

.App {
  font-family: sans-serif;
  text-align: center;
}
/* 页面容器基础样式，加宽度过渡效果 */
.page-container {
  transition: all 2s linear;
  position: relative;
  /* 可根据实际需求调整容器高度 */
  height: 300px;
}
.fullPage {
  background-color: aquamarine;
  width: 490px;
}
.halfPage {
  background-color: bisque;
  width: 290px;
}
/* 组件公共样式，统一控制显隐过渡 */
.page-component {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 2s linear;
  opacity: 0;
  /* 用visibility防止透明组件拦截点击事件 */
  visibility: hidden;
}
/* 激活态组件淡入显示 */
.page-component.active {
  opacity: 1;
  visibility: visible;
}

业务代码修改 #

import "./styles.css";
import { useState } from "react";
import classNames from "classnames";

export const HalfPage = () => {
  return <div>半屏组件内容</div>
}
export const FullPage = () => {
  return <div>全屏组件内容</div>
};
export default function App() {
  const [cnt, setCnt] = useState(0);
  const isFullPage = cnt % 2 === 0;
  const containerClass = classNames("page-container", {
    fullPage: isFullPage,
    halfPage: !isFullPage
  });
  const handleOnClick = () => {
    setCnt(cnt + 1);
  };
  return (
    <div className="App">
      <button onClick={handleOnClick}>Change background</button>
      <div className={containerClass}>
        {/* 保留两个组件不卸载，通过类名控制显隐动画 */}
        <div className={classNames("page-component", {active: isFullPage})}>
          <FullPage />
        </div>
        <div className={classNames("page-component", {active: !isFullPage})}>
          <HalfPage />
        </div>
      </div>
    </div>
  );
}

实现逻辑说明 #

• 放弃直接条件卸载组件的写法，将两个组件以绝对定位的方式叠放在容器同一位置，通过透明度和可见性控制显隐，保证退场动画可以正常执行
• 给容器添加宽度过渡，切换全屏/半屏时容器宽度变化也会有平滑过渡效果，不会生硬跳变
• 使用CSS transition代替单独的keyframes动画，无需额外控制动画触发时机，逻辑更简洁易维护

内容的提问来源于stack exchange，提问作者jacobcan118