CSS 动画 Onclick答案

【问题标题】：CSS Animations OnclickCSS 动画 Onclick
【发布时间】：2016-12-23 11:35:16
【问题描述】：

使用常规 JS（不是 JQuery）我试图让一些图像在点击后抖动，但它不起作用。

HTML：

    <img id='s1_imgB' class="fragment"... onClick="wrongAnswer()"...

JS：

    function wrongAnswer(){ 
        document.getElementById("s1_imgB").style.className = "shake";

CSS：

    .shake:hover {....

我可以使用以下 html 让元素默认抖动。但是，我希望在单击图像后启动 CSS 动画。

HTML：

    <img id='s1_imgB' class="fragment shake"....

当页面加载时，鼠标悬停效果应该是无效的，然后点击图片后，鼠标悬停应该会导致图片抖动。

我做错了什么？谢谢

【问题讨论】：

我们需要的不仅仅是 .. 来帮助您。
你可以看看这个http://stackoverflow.com/questions/8645361/shake-a-login-form-on-error

标签： javascript css html reveal.js

【解决方案1】：

我觉得应该是的

document.getElementById("s1_imgB").className += " shake";

【讨论】：

【解决方案2】：

只需添加在单击图像时执行抖动动画的类。基本上只有一行：

document.getElementById('s1_imgB').classList.add("shake");

要删除该类，只需执行以下操作：

document.getElementById('s1_imgB').classList.remove("shake");

这里有一个 jsfiddle 可以做到这一点。

摇晃动画来自this网站。

希望对你有所帮助。

【讨论】：

【解决方案3】：

我觉得应该是这样的：

function wrongAnswer(){ 
document.getElementById("s1_imgB").className = "shake";

没有（.style）

【讨论】：

出于某种原因，它必须是 += 才能工作。或者，classList.add("shake");也很好用。

【解决方案4】：

您应该删除 CSS 中的 :hover 标识符，因为它可能仅在您单击图像然后移动鼠标触发悬停后应用这些样式。每次将鼠标悬停在图像上时，您也会得到震动。使用 JS 添加类（无悬停）应该应用抖动样式。

您可能还想附加摇动类，此时您正在用摇动替换片段。但根据您提供的信息，尚不清楚您是否需要这样做。

document.getElementById("s1_imgB").className += " shake";

【讨论】：

【解决方案5】：

对我来说，解决方案有点棘手（打开样式，稍等片刻，然后再次将其关闭，这样我每次点击时图像都会抖动，而不仅仅是第一次）：

            var es = document.getElementById("img");
            if (es != null) {
                es.classList.toggle("shakeit");
                setTimeout(() => (es.classList.toggle("shakeit")), 550)
            }

【讨论】：