解决JavaScript点击事件与CSS过渡冲突：实现平滑的元素显示与隐藏

<a id="highScore">View Highscores</a>

<div class="container">
  <div id="questions">
    <h1> Coding Quiz Challenge</h1>
    <ul id="list"></ul>
  </div>
  <!--Info box-->
  <!--START QUIZ BUTTON-->
  <button type="button" id="startButton">Start Quiz</button>
  <div class="info-box">
    <div class="info-title">
      <span id="span"><b>⋆ Quiz Information ⋆</b></span>
    </div>
    <div class="info-text">
      <div class="info">This test will assess your knowledge of basic JavaScript with 5 multiple choice questions. Click the "Start" button to begin the quiz. You will have 75 seconds to complete the assessment. Your score will your be your time remaining and the number
        correct.
      </div>
      <div class="buttons">
        <button class="quit">Exit Quiz</button>
        <button class="restart">Continue</button>
      </div>
    </div>
  </div>
</div>

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.startButton,
.info-box,
.result-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Highscore top */
#highScore {
  position: absolute;
  top: 12px;
  left: 0;
  color: rgb(208, 76, 204);
  padding-left: 10px;
}

/* Timer */
#timer {
  position: absolute;
  color: rgb(253, 253, 253);
  background-color: rgb(232, 142, 226);
  border: inset rgb(208, 76, 204);
  border-radius: 10px;
  top: 12px;
  right: 0;
  padding: 11px;
  margin-right: 30px;
}

.timer-sec {
  background-color: rgb(255, 245, 245);
  width: 25px;
  height: 18px;
  border-radius: 6px;
  margin: 5px;
  display: inline-block;
}

/* Start Page - Quiz Information & Start */
div {
  padding: 5px;
}

h1 {
  background-color: rgb(239, 200, 239);
  margin-top: 50px;
  border: solid 1px purple;
  border-radius: 30px;
  padding: 10px;
}

.container {
  text-align: center;
  padding: 32px 70px 32px 70px;
  height: auto;
  width: auto;
  background-color: rgba(221, 149, 230, 0.232);
}

.info {
  text-align: center;
  float: center;
}

div.info {
  width: 500px;
  margin: auto;
  padding: 6px;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
}

.info-box {
  border-top: 2px solid rgb(209, 149, 196);
  border-bottom: 2px solid rgb(209, 149, 196);
  border-radius: 6px;
  width: 100%;
  /* 默认隐藏并移除文档流 */
  display: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  /* 添加过渡属性 */
  transition: all 0.3s ease;
}

.info-box.activateInfo {
  opacity: 1;
  background-color: white;
  pointer-events: auto; /* 允许点击事件 */
  z-index: 5;
  /* 显示元素 */
  display: inline-block;
  transform: translate(-50%, -50%) scale(1);
}

.info-title {
  background-color: rgba(240, 190, 243, 0.842);
}

/* Start Button */
#startButton {
  color: rgb(255, 255, 255);
  background-color: rgb(180, 102, 180);
  height: 50px;
  width: 130px;
  margin-top: 10px;
  border: inset 10px rgb(168, 93, 168);
  border-width: 3px;
  border-radius: 12px;
  cursor: pointer;
}

/* Exit & Cont. Buttons */
button {
  color: rgb(255, 255, 255);
  background-color: rgb(206, 155, 206);
  height: 45px;
  width: 74px;
  margin-top: 10px;
  border: inset 10px rgb(202, 123, 202);
  border-width: 3px;
  border-radius: 12px;
  cursor: pointer;
}

/* 注意：这里的transition属性值 "0,3s" 应该改为 "0.3s" */
.info-box,
.buttons,
button,
.startButton {
  cursor: pointer;
  transition: all 0.3s ease; /* 修正逗号为小数点 */
}

.button:hover,
button.quit:hover,
button.restart:hover,
.startButton:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(246, 230, 246);
  cursor: pointer;
  transition: all 0.3s ease; /* 修正逗号为小数点 */
}

var startButton = document.getElementById("startButton");
var infoBox = document.querySelector(".info-box");
var quitButton = document.querySelector(".buttons .quit");
var contButton = document.querySelector(".buttons .restart");
// 其他变量定义...
var questionArr = document.getElementById("quiz-box");
var score = document.getElementById("total-que");
var questionId = document.getElementById("option");


//If start button is clicked
startButton.onclick = () => {
    infoBox.classList.add("activateInfo"); // 使用修正后的类名
    // console.log("test"); // 调试信息，可以保留或移除
}

//If Exit button is clicked
quitButton.onclick = () => {
    infoBox.classList.remove("activateInfo"); // 使用修正后的类名
}