Как плавно перемещать фон при переключении между несколькими вариантами в Vanilla JS

Question

У меня есть опция навигации. Один из параметров всегда будет активен по умолчанию и будет иметь цвет фона, подобный следующему:

Когда я нажимаю на любой другой параметр, цвет фона должен плавно анимироваться и двигатьсяот предыдущей опции к вновь выбранной опции. Я пытался найти его, но не смог найти правильное название этого эффекта. Он должен действовать как переключатель, но я хочу создать его для пользовательского использования с текстом, написанным на руле, что невозможно при переключении.

Как мне добиться этого с помощью Vanilla JS. Вот моя скриптовая ссылка JS для того, что я сделал: https://jsfiddle.net/1ex3y94g/1/

Код, который я использую для переключения цвета фона:

function change(id1,id2) {
  document.getElementById(id2).style.background="lightgreen";
  document.getElementById(id1).style.background="red";
}

<div class="wrapper">
  <div class="bar1" id="bar1" onclick="change('bar1','bar2')">
    Option1
  </div>
  <div class="bar2" id="bar2" onclick="change('bar2','bar1')">
    Option2
  </div>
</div>

Answer 1

Вот так: https://jsfiddle.net/72c5k4ub/19/

Эти два параметра вообще не анимированы. Создайте «дескриптор» div, который переводится слева направо в зависимости от того, какая сторона была нажата. Этот дескриптор просто имеет цвет фона и не имеет содержимого. Он отстает от реальных параметров (которые не имеют фонового цвета). Дескриптор не влияет на макет (так как он отображается абсолютно). Для анимации используйте преобразования (для лучшей производительности. Без полей) с анимацией CSS (transform: translateX(100%)). 100% относится к ширине этого элемента.

Answer 2

Вы можете попробовать использовать один класс active и соответствующую анимацию CSS. Смотрите пример ниже.

document.querySelectorAll('.wrapper > div').forEach(() => {
  this.addEventListener('click', (e) => {
    if(e.target.matches('div')) {
     document.querySelector('.active').classList.remove('active');
     e.target.classList.add('active');
    }
  });
});

div.wrapper {
  display: inline-flex;
  background-color: lightgreen;
  border-radius: .5rem;  
}
div.wrapper > div {
  width: 10vw;
  border-radius: .5rem;
  text-align: center;
  background-color: transparent;
}

div.active {
  animation: change 1.2s;
  animation-fill-mode: forwards;
  background-color: red;
}
@keyframes change {
  from {
    background-color: transparent;
  }
  to {
    background-color: red;
  }
}

<div class="wrapper">
  <div class="active" id="bar1">
    Option1
  </div>
  <div id="bar2">
    Option2
  </div>
</div>

Редактировать

Вам нужна только строка JavaScript, чтобы добавить focus или установить active элемент навигации по вашему выбору. Вы можете использовать a элементы вместо div и работать с псевдоклассами :active и :focus.

    div.wrapper {
      display: inline-flex;
      background-color: lightgreen;
      border-radius: .5rem;  
    }
    div.wrapper > a {
      width: 10vw;
      border-radius: .5rem;
      padding: .125rem;
      text-align: center;
      font-size: 1.125rem;
      background-color: transparent;
      text-decoration: none;
    }
    a:focus, a:active {
      animation-name: change;
      animation-timing-function: ease;
      animation-fill-mode: forwards;
      animation-duration: 0.9s;
    }
    @keyframes change {
      from {
        background-color: transparent;
      }
      to {
        background-color: red;
        color:#fff;
        font-weight: 700;
      }
    }

<div class="wrapper">
 <a href="#bar1" tabindex="1" id="bar1">
    Option1
 </a>
 <a href="#bar2" tabindex="2" id="bar2">
    Option2
 </a>
</div>