1

i had problem with rotating icon while click on it. i tried to use key frame for rotating angle icon:

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

and i used it in javascript function like this:

function changeAngle(e) {
  let angleIcon = e.currentTarget.querySelector("i");
  angleIcon.classList.toggle("fa-angle-up");
  angleIcon.style.animation = 'rotateAngle 0.6s'
}

it works, but only for first click.

Arash Kazerooni
  • 15
  • 2
  • Once it's done the animation the system reckons it's done it, writing the name of the animation again in the style won't have any effect. Try listening for the end of the animation and clearing angleIcon.style.animationName then. – A Haworth May 03 '22 at 14:27
  • Take a look at isherwood's answer to my question from Feb. where I had the same issue, he breaks it down perfectly. I used transitions in mine but it should work the same way with animations. https://stackoverflow.com/questions/71253399/rotate-font-awesome-icon-when-a-button-is-clicked-and-trigger-accordion-transiti – AStombaugh May 03 '22 at 16:12

0 Answers0