How to rotate an image and let it stay there on click?

I am able to get the image to rotate 90 degrees so the arrow goes from right arrow to down arrow. I set up the images in html and created the CSS Key frame and linked that up to the javascript.

What I need now is the right arrow to stay the down arrow until I click the button again for it to go from down arrow to right arrow again.

HTML

<div class="profile-side">
 <img src="./references/images/profile pic.png" alt="profile pic">
 <img class="next" src="./references/images/next.png" alt="next">
 <img class="down" src="./references/images/down-arrow.png" alt="down">
 <p>Username</p>
</div>

CSS

@keyframes arrow-rotate {
    0%{transform: rotate(0deg);}

    100%{transform: rotate(90deg);}
}

@keyframes rotate-next {
    0%{transform: rotate(0deg);}

    100%{transform: rotate(-90deg);}
}

//Arrow animate 90 degree down
let arrow = document.querySelector(".next");
let downArrow = document.querySelector(".down");

arrow.addEventListener("click", () =>{
    arrow.style.animation ="arrow-rotate 1s ease";
    setTimeout(nextArrowfade, 1000)
    setTimeout(downarrow, 1000)
})

function nextArrowfade(){
    arrow.style.display="none"
}

function downarrow(){
    downArrow.style.display="block"
}

downArrow.addEventListener("click",() =>{
    downArrow.style.animation ="rotate-next 1s ease";
    setTimeout(nextArrowShow, 1000)
    setTimeout(downarrowFade, 1000)
})

function nextArrowShow(){
    arrow.style.display="block"
}

function downarrowFade(){
    downArrow.style.display="none"
}
})

Answer

I wouldn’t use animation, but transition. So I would switch 2 states (by a class) and set the transition between them.

document.querySelector('button').addEventListener('click', function() {
  this.classList.toggle('rotate-90');
});

.transition-transform {
  transition: .2s transform ease;
}
.rotate-90 {
  transform: rotate(90deg);
}

<button type="button" class="transition-transform">
  ➔
</button>

Advertisement

Answer