CSS动画Onclick

Question

使用常规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"....

当页面加载时，鼠标悬停效果应该处于非活动状态，然后单击图像后，鼠标悬停应该会导致图像抖动。

我做错了什么？感谢

Answer 1

我认为应该是

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

Answer 2

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

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

要删除课程，请执行以下操作：

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

这是jsfiddle执行此操作。

震动动画来自this网站。

我希望我帮助过你。

Answer 3

我认为应该是这样的：

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

没有（.style）

Answer 4

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

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

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

Answer 5

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

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