React项目中如何不刷新页面切换指定div容器的整体布局

你可以搜索的核心关键词：React 卡片堆叠切换、CSS 过渡动画、无刷新视图切换，就能找到相关实现示例。

实现思路 #

• 用React的useState钩子维护视图切换的状态，不需要跳转页面就能更新渲染内容
• 给两个待切换的卡片视图设置绝对定位，重叠在同一个容器位置
• 用CSS的transition属性配合位移、透明度、层级属性，实现卡片堆叠切换的动画效果

具体代码实现 #

React组件代码 #

import { useState } from 'react';
import styles from './你的样式文件路径.module.css';

// 假设tokenContent是你已经定义好的样式变量
const TicketCard = () => {
  // 定义切换状态，false显示第一个视图，true显示第二个视图
  const [isSecondView, setIsSecondView] = useState(false);

  // 切换视图的触发函数，你可以绑定到按钮点击或者其他触发事件上
  const toggleView = () => {
    setIsSecondView(!isSecondView);
  };

  return (
    <div className={styles.showTicketBox}>
      {/* 第一个视图 */}
      <div className={`${styles.cardView} ${isSecondView ? styles.cardOut : styles.cardIn}`}>
        <div className={styles.showTicketBox1}>
          <div className={styles.userEligibleTickets}>
            <p>Your Eligible Tickets</p>
            <h3 style={tokenContent}>0 Ticket(s)</h3>
          </div>
          <div className={styles.userDepositedTickets}>
            <p>Your Deposited Tickets</p>
            <h3 style={tokenContent}>0 Ticket(s)</h3>
          </div>
        </div>
        <div className={styles.showTicketBox2}>
          <div className={styles.userWinningTickets}>
            <p>Your Winning Tickets</p>
            <h3 style={tokenContent}>0 Ticket(s)</h3>
          </div>
          <div className={styles.userTicketsAllo}>
            <p>Your Allocation</p>
            <h3 style={tokenContent}>0 SHI</h3>
          </div>
        </div>
      </div>

      {/* 第二个视图，你可以替换成你第二张图对应的内容结构 */}
      <div className={`${styles.cardView} ${isSecondView ? styles.cardIn : styles.cardOut}`}>
        {/* 这里放第二张图对应的HTML结构 */}
        <div>第二个卡片的内容</div>
      </div>

      {/* 切换按钮，你可以放到你想要的位置 */}
      <button onClick={toggleView}>切换视图</button>
    </div>
  );
};

export default TicketCard;

CSS样式代码 #

.showTicketBox{
    width: 100%;
    /* 父容器设置相对定位，作为内部卡片的定位参照物 */
    position: relative;
    min-height: 200px; /* 设置最小高度，避免内容切换时容器高度塌陷 */
    padding: 20px;
    margin-top: 2em;
    .showTicketBox1{
        width: auto;
        height:auto;
        display: inline-block;
    }
    
    .showTicketBox2{
        width: auto;
        height:auto;
        display: inline-block;
        margin-left: 20px;
    }

    /* 卡片公共样式 */
    .cardView {
        position: absolute;
        top: 20px;
        left: 20px;
        width: calc(100% - 40px);
        transition: all 0.3s ease; /* 所有属性变化添加0.3秒过渡动画 */
    }

    /* 卡片切入（当前显示）的样式 */
    .cardIn {
        transform: translateX(0) scale(1);
        opacity: 1;
        z-index: 10; /* 更高层级，显示在上方 */
    }

    /* 卡片切出（堆叠到下方/移出）的样式 */
    .cardOut {
        transform: translateX(20px) scale(0.95); /* 往右偏移+缩小一点，模拟堆叠效果 */
        opacity: 0;
        z-index: 1; /* 更低层级，放在下方 */
        pointer-events: none; /* 切出的卡片不响应点击事件 */
    }
}

如果想要上下堆叠的效果，把translateX改成translateY就行，调整数值就能匹配你想要的层叠效果。

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