HTML/CSS/JS剪刀石头布游戏：页面切换淡入淡出效果失效求助

问题描述 #

我正在使用HTML、CSS和JavaScript开发一款剪刀石头布游戏，但点击按钮时，从intro类切换到match类的淡入淡出效果无法正常工作，不清楚问题出在哪里。

相关代码 #

JavaScript代码

const game = () => {
  let pScore = 0;
  let cScore = 0;

  // Start the Game
  const startGame = () => {
    const playBtn = document.querySelector(".intro button");
    const introScreen = document.querySelector(".intro");
    const match = document.querySelector(".match");

    playBtn.addEventListener("click", () => {
      introScreen.classList.add("fadeOut");
      match.classList.add("fadeIn");
    });
  }

  //call all the inner functions
  startGame();
};

//start the game function
game();

HTML代码

<body>
  <section class="game">
    <div class="score">
      <div class="player-score">
        <h2>Player</h2>
        <p>0</p>
      </div>
      <div class="computer-score">
        <h2>Computer</h2>
        <p>0</p>
      </div>
    </div>
    <div class="intro">
      <h1>Rock Paper Scissors</h1>
      <button>Start</button>
    </div>
    <div class="match fadeOut">
      <h2 class="winner">Choose your weapon</h2>
      <div class="hands">
        <img class="player-hand" src="./asset/rock.png" alt="rock">
        <img class="computer-hand" src="./asset/rock.png" alt="rock">
      </div>
      <div class="options">
        <button class="rock">rock</button>
        <button class="paper">paper</button>
        <button class="scissors">scissors</button>
      </div>
    </div>
  </section>
  <script src="app.js"></script>
</body>

问题原因 #

你的JS逻辑是正确的，但淡入淡出效果不生效的核心问题是缺少fadeIn和fadeOut类对应的CSS过渡样式——JS只是给元素添加了类，但浏览器没有收到视觉变化的指令。另外，.match元素初始添加的fadeOut类需要配合CSS的初始状态才能正确工作。

解决方案 #

添加以下CSS代码，定义淡入淡出的过渡动画和元素状态：

/* 确保游戏容器为相对定位，让子元素的绝对定位生效 */
.game {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* 基础样式：让intro和match全屏重叠 */
.intro, .match {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease; /* 定义0.5秒的透明度过渡 */
}

/* 初始状态：intro显示，match隐藏 */
.intro {
  opacity: 1;
}
.match {
  opacity: 0;
  pointer-events: none; /* 隐藏时禁止点击交互 */
}

/* fadeOut类：元素淡出并禁止交互 */
.fadeOut {
  opacity: 0;
  pointer-events: none;
}

/* fadeIn类：元素淡入并恢复交互 */
.fadeIn {
  opacity: 1;
  pointer-events: auto;
}

添加上述CSS后，点击Start按钮，.intro会平滑淡出，.match会平滑淡入，淡入淡出效果即可正常工作。

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