CSS3 вращение задерживается

Question

У меня есть ссылка на моей веб-странице, как только я нажимаю на нее, мне нужно, чтобы она повернулась на 180 градусов.

HTML, который включает тег ссылки со значком вниз:

При нажатии на него добавить класс свернутый: Если сложенный класс добавить, то поверните .fa-caret-down на 180 градусов.

$(document).on("click", ".collapse-arrow", function() {
    $(this).toggleClass("collapsed");
    $("#slide-div").slideToggle(500);
});

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

.fa {
  padding: 5px 8px;
  transition: all .2s ease-in-out;
  transform: rotate(0);
  font-size: 15px;
  color: #000;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="collapse-arrow room-collapse">
    <i class="fa fa-caret-down"></i>
</a>

Это прекрасно работает, когда на веб-странице меньше элементов. Но после того, как страница получает больше элементов, этот переход занимает несколько секунд (3 секунды). Также slideToggle # slide-div занимает много времени. Но это работает нормально, как только я удаляю это свойство поворота.

В чем может быть проблема здесь?

Answer 1

Задержка при наличии нескольких элементов, вероятно, вызвана transition: all. Вы должны указать только те параметры, которые хотите анимировать, иначе браузер попытается рассчитать переход для всех параметров. Использовать класс fa-rotate-180, как предложил Джом, гораздо проще.

Кроме того, изменение класса .fa является плохой практикой. Что произойдет, если вы или кто-то еще, работающий над проектом, захотите использовать значок .fa со стандартным поведением?