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

我想应该是这样的：

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

没有（.style）

Answer 3

您应该删除 css 中的

:hover

标识符，因为它可能仅在您单击图像然后移动鼠标触发悬停后应用这些样式。每次将鼠标悬停在图像上时，您也会感到震动。使用 JS 添加类（没有悬停）应该应用摇动样式。

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

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

Answer 4

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

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

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

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)
            }

Answer 6

这是我个人的解决方案：

const Shake=(e)=>{
  document.querySelector(e).classList.add("shake");
  setTimeout(()=>
    {document.querySelector(e).classList.remove("shake")},1000);
};

document.getElementById("elm").addEventListener("click",()=>{
  Shake("#elm");
});

#elm {
  position: fixed;
  top: 10px;
  left: 10px;
  height: 100px;
  aspect-ratio: 1 / 1;
  background: green;
  cursor: pointer;
}
.shake {
  animation: shakefx 1000ms ease-in-out;
}
@keyframes shakefx {
  0%{transform:translate(-5%,-5%) rotate(-2deg);}
  10%{transform:translate(2%,-4%) rotate(1deg);}
  20%{transform:translate(-3%,3%) rotate(-1deg);}
  30%{transform:translate(-4%,5%) rotate(.5deg);}
  40%{transform:translate(-5%,3%) rotate(-1deg);}
  50%{transform:translate(2%,-4%) rotate(3deg);}
  60%{transform:translate(-3%,3%) rotate(-2deg);}
  70%{transform:translate(-5%,5%) rotate(.5deg);}
  80%{transform:translate(-5%,3%) rotate(1deg);}
  90%{transform:translate(2%,-4%) rotate(-1deg);}
  100%{transform:translate(0%,0%) rotate(0deg);}
}

<div id="elm"></div>