Как убрать дергание в анимации кнопки при наведении мыши на SVG?

Question

Сделал плавную анимацию при наведении мыши на зеленую кнопку, но когда мышь задевает SVG-элемент анимация ведет себя так как будто я убрал мышь из области кнопки. Как сделать так чтобы при наведении мыши на SVG ничего не происходило? P.S. z-index проблему не решает.

class test {
    static central_button = document.querySelector(".cls2");

    static increaseButtonSize() {
        let animation = [{width:"400%"}];
        let timing = {
            duration: 200,
            fill: "forwards",
            easing: "linear",
        };
        test.central_button.animate(animation, timing);
    }

    static reduceButtonSize() {
        let animation = [{width:"100%"}];
        let timing = {
            duration: 200,
            fill: "forwards", 
            easing: "linear",
        };
        test.central_button.animate(animation, timing);
    }
}

document.addEventListener("DOMContentLoaded", function() {
    test.central_button.addEventListener("mouseover", test.increaseButtonSize);
    test.central_button.addEventListener("mouseout", test.reduceButtonSize);
})

div {
    display: flex;
    justify-content: start;
    background-color: #aaa;
    width: 400px;
}

button {
    width: 100%;
    min-width: 30px;
    background-color: #0000;
    border: none;
    min-height: 30px;
    font-size: 20px;
    padding: 10px;
}

.cls1 {
    background-color: #f00;
}

.cls2 {
    background-color: #0f0;
}

.cls3 {
    background-color: #00f;
}

svg {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="/src/css/test.css">
    </head>
    <body>
        <div>
            <button class="cls1">1</button>
            <button class="cls2">
                <svg class="tools-common__svg" viewBox="0 0 17 17">
                    <path d="M10.646 13.146l0.707 0.707-2.853 2.854-2.854-2.854 0.707-0.707 1.647 1.647v-3.772h1v3.772l1.646-1.647zM8 2.207v3.772h1v-3.772l1.646 1.646 0.707-0.707-2.853-2.853-2.854 2.853 0.707 0.707 1.647-1.646zM0 8v1h17v-1h-17z"/>
                </svg>
            </button>
            <button class="cls3">3</button>
        </div>
        <script type="module" src="/src/js/test.js"></script>
    </body>
</html>

Answer 1

Я могу вам предложить чистый CSS... не очень понимаю зачем всё усложнять.

div {
  display: flex;
  justify-content: start;
  background-color: #aaa;
  width: 400px;
}

button {
  width: 100%;
  min-width: 30px;
  background-color: #0000;
  border: none;
  min-height: 30px;
  font-size: 20px;
  padding: 10px;
}

.cls1 {
  background-color: #f00;
}

.cls2 {
  background-color: #0f0;
}

.cls3 {
  background-color: #00f;
}

svg {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}

.animation-effect {
  transition: width 0.2s linear;
}

.animation-effect:hover {
  width: 400%;
}

<div>
  <button class="cls1">1</button>
  <button class="cls2 animation-effect">
    <svg class="tools-common__svg" viewBox="0 0 17 17">
      <path
        d="M10.646 13.146l0.707 0.707-2.853 2.854-2.854-2.854 0.707-0.707 1.647 1.647v-3.772h1v3.772l1.646-1.647zM8 2.207v3.772h1v-3.772l1.646 1.646 0.707-0.707-2.853-2.853-2.854 2.853 0.707 0.707 1.647-1.646zM0 8v1h17v-1h-17z"
      />
    </svg>
  </button>
  <button class="cls3">3</button>
</div>

Если же вам принципиально нужен JS. То проблема анимации проиходит когда курсор заходит на <svg> внутри кнопки, браузер считает, что mouseout с кнопки произошёл и тут же mouseover снова — это создаёт дерганье анимации, потому что анимация запускается заново. И вам следует заменить события на

test.central_button.addEventListener("mouseenter", test.increaseButtonSize); test.central_button.addEventListener("mouseleave", test.reduceButtonSize);

Должно помочь... Хотя, это выглядит странно.

БЛОГ НА HUSL

Как убрать дергание в анимации кнопки при наведении мыши на SVG?

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