javascript - HTML CSS JS，在javascript中添加类似乎不起作用

Question

我知道有人已经问过这个问题，但实际上我搜索了又搜索，但没有找到任何可以帮助我的东西。 所以我做了一个你可能听说过的小游戏:7 BOOM。这是一个小类作业，我在使用 JavaScript 添加类时遇到了问题，但没有使用 jQuery，因为我们在学校还没有做到这一点。

我想要做的就是在给定的点击和一些 if 条件下，div 会缩小一点，然后像流行动画一样变大。当我使用 class="animeclass" 将带有动画的类直接添加到 div 内的 HTML 页面时，它工作得很好，但是当我使用 classList.add( "animeclass"); 没有任何反应。我有点困惑，但它。 任何帮助将非常感激。这是一些代码: HTML

<div id="infoi">
    <div id="scoreButton787">
         <h1 id="scoreText787">0</h1>
    </div>
</div>

CSS

.animateScalePop{
  animation: animScaleDown 1000ms 1;
}
@keyframes animScaleDown{
0%{transform: scale(1.0);}
15%{transform: scale(0.787);}
75%{transform: scale(1.6787);}
100%{transform: scale(1.0);}
}

JS

 function startScalingPop(element){

    element.classList.add("animateScalePop");
}

我不会发布整个代码，因为这里有很多东西，但我向你保证，到时候它会 100% 进入 startScalingPop(element) 函数，它只是起作用。该元素从 html 页面获取正确的元素。

Answer 1

我无法通过评论发布工作示例，所以我添加了一个答案。所以这是一个基本上是点击按钮的例子，我们将 animateScalePop 类添加到 #infoi。它似乎在这种情况下具有动画效果，所以我认为您发布的代码似乎是正确的。

然而，动画本身可能不正确，但这听起来像是作业的一部分，需要您弄清楚。总的来说，您在这里发布的内容似乎是正确的并且可以正常工作!欢迎发表评论和提问，但总体而言，我认为您的方向是正确的!

function startScalingPop(element){

    element.classList.add("animateScalePop");
}

function scaleSomething() {
  var infoi = document.getElementById("infoi");
  startScalingPop(infoi);
}

.animateScalePop{
  animation: animScaleDown 1000ms 1;
}
@keyframes animScaleDown{
0%{transform: scale(1.0);}
15%{transform: scale(0.787);}
75%{transform: scale(1.6787);}
100%{transform: scale(1.0);}
}

<div id="infoi">
    <div id="scoreButton787">
         <h1 id="scoreText787">0</h1>
    </div>
</div>
<button onClick="scaleSomething()">Scale this</button>