CODEWITHSUNDEEP
javascriptcsshtmlreveal.js
user2806040
user2806040

Reputation:

CSS Animations Onclick

Using regular JS (not JQuery) I am trying to make some images shake after they are clicked but it is not working.

HTML:

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

JS:

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

CSS:

    .shake:hover {....

I can get the elements to shake by default using the following html. But, I want to have the CSS animation initiate after the image is clicked.

HTML:

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

When the page loads, the mouse hover affect should be inactive, then after the image is clicked, the mouse hover should cause the image to shake.

What am I doing wrong? Thanks

Upvotes: 3

Views: 5977

Answers (6)

M1dnightGMR
M1dnightGMR

Reputation: 1

Heres my personal solution:

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>

Upvotes: 0

Honza P.
Honza P.

Reputation: 1242

For me the solution was a bit more tricky (togle style ON, wait a bit and then turn it OFF again so that image shakes every time I click it, not only the first time):

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

Upvotes: 0

Gehtnet
Gehtnet

Reputation: 447

Just add the class that do the shaking-animation, when the image is clicked. Basically it is just one line:

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

To remove the class just do:

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

Here is a jsfiddle that does this.

The shaking animation is from this site.

I hope I helped you.

Upvotes: 0

T Mitchell
T Mitchell

Reputation: 1017

You should remove the :hover identifier in your css, as it may only apply those styles after you have clicked the image and then move the mouse to trigger a hover. You would also then get the shake every time you mouseover the image. Adding the class (without hover) with JS should apply the shake styles.

You may also want to append the shake class, at the moment you are replacing fragment with shake. But it's unclear if you need to do that based on the info you've supplied.

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

Upvotes: 0

Ahmed Beheiry
Ahmed Beheiry

Reputation: 1

I think it should be like that: 

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

without (.style )

Upvotes: 0

Bj&#246;rn
Bj&#246;rn

Reputation: 168

I think it should be

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

Upvotes: 2

Related Questions