Не работает анимация после изменения классов

Question

Возникла проблема с анимацией. Есть такой toolbar в котором есть кнопка раскрытия/скрытия. Через js менял классы самому svg, а также всей кнопке. При наведении на кнопку она подымается или опускается (в зависимости от того в каком направлении расположена иконка). При первом нажатии анимация работает корректно, при втором и последующих уже не работает

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Draft</title>
    <link rel="stylesheet" href="draft.css">

</head>

<body>
<div class="sidebar toolbar">
    <div class="open toolbar-btn">
        <img src="../img/icons/chevron.svg" alt="Open" class="chevron chevron-down" draggable="false">
    </div>

    <div class="font toolbar-btn">
        <img src="../img/icons/font.svg" alt="">
    </div>
    <div class="underline toolbar-btn">
        <img src="../img/icons/underline.svg" alt="">
    </div>
    <div class="italic toolbar-btn">
        <img src="../img/icons/italic.svg" alt="">
    </div>
    <div class="color toolbar-btn">
        <img src="../img/icons/color.svg" alt="">
    </div>
    <div class="resize toolbar-btn">
        <img src="../img/icons/resize.svg" alt="">
    </div>
    <div class="download toolbar-btn">
        <img src="../img/icons/download.svg" alt="">
    </div>

    <div class="empty"></div>

    <div class="lock toolbar-btn">
        <img src="../img/icons/lock.svg" alt="">
    </div>
</div>

<script src="script.js"></script>
</body>
</html>

CSS

@import "../css/nullstyle";

$scroll-color: linear-gradient(180deg, #A00BC5 0%, #1B5454 100%);
$scroll-color-hover: linear-gradient(180deg, #D012FF 0%, #0B9191 100%);
$panels-color: linear-gradient(90deg, #161616 -23.12%, #262525 100%);

.open, .hide {
  transition: transform 300ms;

  &:hover {
    .chevron-down {
      transform: translateY(7px);
    }

    .chevron-up {
      transform: translateY(-7px);
    }
  }

  .chevron {
    transition: inherit;
  }
}

.toolbar {
  width: 80px;
  height: 80px;
  border-radius: 15px;
  background: $panels-color;
  overflow: hidden;
  display: grid;

  transition: height 300ms;

  .toolbar-btn, .empty {
    display: grid;
    justify-items: center;
    align-items: center;
    width: 80px;
    height: 80px;
  }
}

JS

let chevronFromToolbar = document.querySelector('.toolbar-btn > .chevron');
let toolbar =  document.querySelector('.toolbar');

let chevronFromSaves = document.querySelector('.saves-btn > .chevron');
function rotateChevron (chevron, degrees) {
        chevron.style.transform = `rotate(${degrees}deg)`;
}

toolbar.firstElementChild.onclick = () => {
    if (toolbar.firstElementChild.classList.contains('open')) {
        toolbar.style.height = '720px';
        toolbar.firstElementChild.style.order = '8 ';
        chevronFromToolbar.classList.remove('chevron-down');
        chevronFromToolbar.classList.add('chevron-up');

        rotateChevron(chevronFromToolbar, 180);

        toolbar.firstElementChild.classList.remove('open');
        toolbar.firstElementChild.classList.add('hide');
    }
    else if (toolbar.firstElementChild.classList.contains('hide')) {
        toolbar.style.height = '80px';
        toolbar.firstElementChild.style.order = '0';
        chevronFromToolbar.classList.remove('chevron-up');
        chevronFromToolbar.classList.add('chevron-down');

        rotateChevron(chevronFromToolbar, 360);

        toolbar.firstElementChild.classList.remove('hide');
        toolbar.firstElementChild.classList.add('open');
    }
};

Answer 1

Вызов функции rotateChevron переопределяет стили прописывая их инлайново в разметке, а именно свойство transform

Отказаться от использования функции rotateChevron и логику переворота возложить на css. Вы уже добавляете определённый класс .chevron-up, поэтому можно просто дописать стиль

.open,
.hide {
  transition: transform 300ms;

  &:hover {
    .chevron-down {
      transform: translateY(7px);
    }

    .chevron-up {
      transform: translateY(-7px);
    }
  }

  .chevron {
    transition: inherit;

    &.chevron-up {
      transform: rotate(180deg);
    }
  }
}

Чтобы ховер для шеврона работал и при раскрытом меню,меняя его положение, можно добавить веса селектору и добавив ту же самую трансформацию

.open,
.hide {
  transition: transform 300ms;

  &:hover {
    .chevron-down {
      transform: translateY(7px);
    }

    .chevron.chevron-up {
      transform: rotate(180deg) translateY(7px);
    }
  }

  .chevron {
    transition: inherit;

    &.chevron-up {
      transform: rotate(180deg);
    }
  }
}

БЛОГ НА HUSL

Не работает анимация после изменения классов

Ответы (1 шт):