React中使用useState实现按钮点击切换页面组件的方案

核心实现思路 #

通过React状态管理控制视图切换，配合CSS动画实现过渡效果，具体步骤如下：

• 1. 初始化视图状态
  启用useState管理当前显示的页面，初始状态设为'landing'标记着陆页。

• 2. 绑定切换逻辑
  给按钮添加点击事件，触发后先给着陆页添加淡出动画类，等动画执行完成后再切换状态到'portfolio'。

• 3. 条件渲染组件
  根据当前状态判断，显示着陆页或导入的Portfolio组件。

修改后的完整代码 #

App.js

import React, { useState, useRef } from "react";
import "./App.css";
import Portfolio from "./Portfolio"; // 取消注释导入组件

function App() {
  const [view, setView] = useState('landing');
  const landingRef = useRef(null); // 获取着陆页容器的DOM引用

  const handleViewPortfolio = () => {
    // 给着陆页添加淡出动画类
    landingRef.current.classList.add('fade-out');
    
    // 监听动画结束事件，完成后切换视图
    landingRef.current.addEventListener('animationend', () => {
      setView('portfolio');
    }, { once: true }); // 确保事件只触发一次
  };

  return (
    <div className="App">
      {view === 'landing' ? (
        <div ref={landingRef} className="landing-page">
          <div className="title">
            <h1 className="title maintext">Josh Bellingham</h1>
            <h2 className="title subtext">Junior Web Developer</h2>
            <button className="title btn" onClick={handleViewPortfolio}>
              <span>Welcome</span>
            </button>
          </div>
          <div className="sun">
            <img className="sun-img" src="Sun.png" alt="Sun" />
            <div className="sun-ray r-one"></div>
            <div className="sun-ray r-two"></div>
            <div className="sun-ray r-three"></div>
            <div className="sun-ray r-four"></div>
          </div>
          <div className="waves">
            <img className="wave-1" src="Wave 1 (1).png" alt="Wave"></img>
            <img className="wave-2" src="Wave 2 (1).png" alt="Wave"></img>
            <img className="wave-3" src="Wave 3 (1).png" alt="Wave"></img>
          </div>
        </div>
      ) : (
        <Portfolio />
      )}
    </div>
  );
}

export default App;

App.css 新增动画样式

.landing-page {
  width: 100%;
  height: 100vh;
  position: relative;
}

/* 淡出动画类 */
.fade-out {
  animation: fadeOut 0.6s forwards;
}

@keyframes fadeOut {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-20px); visibility: hidden; }
}

补充说明 #

• 使用useRef获取DOM元素，是为了精准控制动画的添加和事件监听
• animationend事件保证动画完全执行完毕后再切换组件，避免视觉跳变
• 后续如果需要更复杂的过渡效果（比如滑入、缩放），只需要修改CSS关键帧动画即可

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