如何修复Start Button到info-box的点击过渡失效问题？

我卡在这个问题上已经有一段时间了——控制台能正常输出动作，但过渡效果就是不生效。我猜是CSS里的样式冲突，但找了半天没发现问题。我是JavaScript新手，自己排查无果，附上代码，希望能快速解决。

JavaScript代码 #

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("activeInfo");
    console.log("test")
}

//If Exit button is clicked
quitButton.onclick = ()=>{
    infoBox.classList.remove("activeInfo");

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/style.css" />
    <link rel="extra stylesheet" href="./assets/extra.css">
    <title>Coding Quiz Challenge!</title>
</head>

    <body>
        <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" style.display = "block">
            <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>

CSS代码 #

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%;
        opacity: 0;
        transform: translate(-50%,-50% scale(0.9));
    }
    .info-box.activateInfo {
        opacity: 1;  
        pointer-events: auto;
        z-index: 5;
        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;
    }
    
    .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;
    }

以下是导致过渡失效的几个关键问题及修复方式：

1. 类名拼写不匹配

   • JS中给infoBox添加的类是activeInfo，但CSS里写的是.info-box.activateInfo（多了一个t），把CSS里的类名改成.info-box.activeInfo即可匹配。

2. transform语法错误

   • .info-box里的transform: translate(-50%,-50% scale(0.9));语法错误，translate和scale是两个独立的变换函数，应该分开写：

     transform: translate(-50%, -50%) scale(0.9);
     

3. 过渡效果的逗号错误

   • CSS里的transition: all 0,3s ease;中，小数应该用.而不是,，两处过渡代码都要修正：

     transition: all 0.3s ease;
     

4. HTML内联样式语法错误

   • info-box的内联样式写成了style.display = "block"，正确写法是style="display:block"。

5. JavaScript代码不完整

   • quitButton的事件处理函数没有闭合，补上}：

     quitButton.onclick = ()=>{
         infoBox.classList.remove("activeInfo");
     }
     

把这些问题修复后，过渡效果就能正常生效了。

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