HTML CSS JS，在java-script中添加类似乎不起作用
HTML CSS JS，在java-script中添加类似乎不起作用
提问于 2018-09-16 03:27:06
我知道人们已经问过这个问题了，但我真的找了又找，没有找到任何能帮助我的东西。所以我做了一个你可能听说过的小游戏:7轰隆。这是一个小的班级作业，我对在JavaScript中添加类有问题，但没有使用jQuery，因为到目前为止我们还没有在学校学到。
我想要做的就是，在给定的点击条件下，div会像流行动画一样变小一点，然后变大一点。当我使用class="animeclass"将带有动画的类直接添加到div中的HTML页面中时，它可以完美地工作，但是当我使用classList.add("animeclass");将它添加到Javascript中的元素时，没有任何反应。我有点困惑，但它。任何帮助都将不胜感激。下面是一些代码: 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(元素)函数时，它就不会工作了。元素从html页面获取正确的元素。
回答 1
Stack Overflow用户
发布于 2018-09-16 03:38:13
我不能通过评论发布工作示例，所以我添加了一个答案。这是一个点击按钮的例子，我们将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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52348128
复制相关文章
相似问题
腾讯云开发者
