Rotation / transition animation on button is not working on every onClick()

Question

So i'm trying to create an arrow that rotates 180deg on every click (so up en down). But the transition only works for down, when the arrows goes up there is no smooth transition anymore.

My HTML

 <button class="button-arrow" onClick="showItems()"> <img class="arrow-down" src="./src/arrow-down.svg"> </button>

<ul class="hidden-items">
   <li>Red</li>
   <li>Blue</li>
   <li>Yellow</li>
   
</ul>

My JS file:

function showItems() {
    var items = document.getElementsByClassName("hidden-items")[0];
    var arrow = document.getElementsByClassName("arrow-down")[0]

    if (items.style.display == "block") {
        items.style.display = "none";
        arrow.classList.toggle('rotate-arrow')

    } else {
        items.style.display = "block";
        arrow.classList.toggle('rotate-arrow')
    }
}

My CSS


.rotate-arrow {
  transform: rotate(180deg);
  transition: transform 0.5s;
}

Does anyone has any advice how to solve this problem ?

`display` is not animatable. Read the [documentation](//developer.mozilla.org/en-US/docs/Web/CSS/display#formal_definition) (also on [`transition`](//developer.mozilla.org/en-US/docs/Web/CSS/transition)) and see [Transitions on the CSS display property](/q/3331353/4642212). — Sebastian Simon, Jun 07 '21 at 12:49
i see, but im not trying to rotate the display, im trying to rotate an svg/image! I edited the html in my question! :) — bosman2, Jun 07 '21 at 12:52
`display` not being [animatable](//developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties) also means that you _cannot include_ a `display` change in a transition or animation. Not sure what you mean by “rotate the display”; did you mean “transition the `display` property”? Again, `display` is a CSS property that _cannot be included_ in transitions or animations. The entire animation or transition won’t work if you include a property of _discrete_ animation type. — Sebastian Simon, Jun 07 '21 at 12:53
Another thing: checking CSS properties directly is [best avoided](/q/55071684/4642212). Use [`.classList.has("rotate-arrow")`](//developer.mozilla.org/en-US/docs/Web/API/Element/classList) instead, to check for existence of the class. Have you tried the [`hidden` attribute](//developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) instead of `display`? — Sebastian Simon, Jun 07 '21 at 13:01

score 0 · Answer 1 · answered Jun 07 '21 at 13:06

That's because your transition is linked to the class you are toggling

function showItems() {
  var items = document.getElementsByClassName("hidden-items")[0];
  var arrow = document.getElementsByClassName("arrow-down")[0]

  if (items.style.display == "block") {
    items.style.display = "none";
    arrow.classList.toggle('rotate-arrow')

  } else {
    items.style.display = "block";
    arrow.classList.toggle('rotate-arrow')
  }
}

.arrow-down {
  transition: transform 0.5s;
}

.rotate-arrow {
  transform: rotate(180deg);
}

<button class="button-arrow" onClick="showItems()"> <img class="arrow-down" src="./src/arrow-down.svg"> </button>

<ul class="hidden-items">
  <li>Red</li>
  <li>Blue</li>
  <li>Yellow</li>

</ul>

Rotation / transition animation on button is not working on every onClick()

1 Answers1