CSS 动画点击

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

我觉得应该是这样的：

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

没有（.style）

Answer 3

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

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

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

Answer 4

只需添加 class 即可在单击图像时制作抖动动画。基本上只有一行：

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

要删除 class 只需执行以下操作：

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

这是执行此操作的 jsfiddle。

抖动动画来自this网站。

希望对你有所帮助。

Answer 5

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

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

CSS 动画点击

CSS Animations Onclick

html

javascript

css

reveal.js