Обрыв анимации при наведении

Question

Имеются ссылки, по стандарту белые, при наведении цвет ссылки должен меняться на градиент. Реализовал, но проблема в том, что при наведении анимация появления есть, плавная и красивая, но как только курсор уводиться с ссылки, происходит обрыв анимации, что уже выглядит не очень.

body{
font-family: Roboto;
  font-weight: 600;
}
ul{
  background: #19191A;
  padding: 50px;
  list-style: none;
  display: flex;
  
}
.menu-item a {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 20px;
  line-height: 19px;
  text-align: center;
  color: #FFFFFF;
  transition: text-shadow .3s, color .3s;
}
.menu-item a:hover {
  background: linear-gradient(94.55deg, #7FB5F4 4.8%, #3C43E1 55.57%, #7F84F4 97.99%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 16px rgba(244, 162, 97, 0.64);
}
.menu-item {
  margin-right: 40px;
}

<ul>
  <li class="menu-item underline_a">
    <a href="#">Home</a>
  </li>
  <li class="menu-item underline_a">
    <a href="#">Rules</a>
  </li>
  <li class="menu-item underline_a">
    <a href="#">Posts</a>
  </li>
</ul>

Пробовал заменить так, но теперь анимация вообще пропала:

.menu-item a {
  background: #fff;
  transition: text-shadow .3s, color .3s, background .3s;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text; 
}

Answer 1

const menuItemANodes = document.querySelectorAll('.menu-item a');
const duration = gsap.getProperty(document.documentElement, '--transitionDuration');

for (const menuItemANode of menuItemANodes) {
  menuItemANode.addEventListener('mouseout', (event) => {
    mouseOutMenuItem(event, duration);
  });
  menuItemANode.addEventListener('mouseover', (event) => {
    mouseOverMenuItem(event, duration);
  });
}

function mouseOverMenuItem(event, duration) {
  const targetNode = event.target;
  const color1 = gsap.getProperty(targetNode, '--bgColor1Const');
  const color2 = gsap.getProperty(targetNode, '--bgColor2Const');
  const color3 = gsap.getProperty(targetNode, '--bgColor3Const');
  const textShadow = gsap.getProperty(targetNode, '--textShadow');

  gsap.to(targetNode, {
    '--bgColor1': color1,
    '--bgColor2': color2,
    '--bgColor3': color3,
    '-webkit-background-clip': 'text',
    'background-clip': 'text',
    'color': 'transparent',
    'text-shadow': textShadow,
    duration: duration
  });
}

function mouseOutMenuItem(event, duration) {
  const targetNode = event.target;

  gsap.to(targetNode, {
    '--bgColor1': 'rgba(0, 0, 0, 0)',
    '--bgColor2': 'rgba(0, 0, 0, 0)',
    '--bgColor3': 'rgba(0, 0, 0, 0)',
    'text-shadow': '0 0 0 rgba(0, 0, 0, 0)',
    'color': 'white',
    '-webkit-background-clip': 'text',
    'background-clip': 'text',
    duration: duration
  });
}

:root {
  --transitionDuration: 0.5s;
}

body {
  font-family: Roboto;
  font-weight: 600;
}

ul {
  background: #19191A;
  padding: 50px;
  list-style: none;
  display: flex;
}

.menu-item a {
  --bgColor1Const: #7FB5F4;
  --bgColor2Const: #3C43E1;
  --bgColor3Const: #7F84F4;
  --bgColor1: rgba(0, 0, 0, 0);
  --bgColor2: rgba(0, 0, 0, 0);
  --bgColor3: rgba(0, 0, 0, 0);
  --textShadow: 0 0 16px rgba(244, 162, 97, 0.64);

  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 20px;
  line-height: 19px;
  text-align: center;
  -webkit-background-clip: text;
  background-clip: text;
  background: linear-gradient(94.55deg, var(--bgColor1) 4.8%, var(--bgColor2) 55.57%, var(--bgColor3) 97.99%);
  color: white;
}




.menu-item {
  margin-right: 40px;
}

<ul>
  <li class="menu-item underline_a">
    <a href="#">Home</a>
  </li>
  <li class="menu-item underline_a">
    <a href="#">Rules</a>
  </li>
  <li class="menu-item underline_a">
    <a href="#">Posts</a>
  </li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script>

Answer 2

Как по мне надо делать на js с добавлением активного класса. Просто ставишь transition активному классу, и он сам все сделает.

Answer 3

Что если сделать, как предлагают тут? То есть анимировать пользовательские свойства -- цвета в градиенте.

body{
font-family: Roboto;
  font-weight: 600;
}
ul{
  background: #19191A;
  padding: 50px;
  list-style: none;
  display: flex;
}

.menu-item {
  margin-right: 40px;
}

/* Добавлены свойства */
@property --myColor1 {
  syntax: '<color>';
  initial-value: #fff;
  inherits: false;
}

@property --myColor2 {
  syntax: '<color>';
  initial-value: #fff;
  inherits: false;
}

.menu-item a {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 20px;
  line-height: 19px;
  text-align: center;

/*   Изменено и добавлено */
  background: linear-gradient(94.55deg, var(--myColor1) 4.8%, var(--myColor2) 55.57%, var(--myColor1) 97.99%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  transition:  text-shadow .3s, --myColor1 .3s, --myColor2 .3s;
}

.menu-item a:hover {
  --myColor1: #7FB5F4;
  --myColor2: #3C43E1;
  text-shadow: 0 0 16px rgba(244, 162, 97, 0.64);
}

<ul>
  <li class="menu-item underline_a">
    <a href="#">Home</a>
  </li>
  <li class="menu-item underline_a">
    <a href="#">Rules</a>
  </li>
  <li class="menu-item underline_a">
    <a href="#">Posts</a>
  </li>
</ul>

Answer 4

Достаточно странные ответы Вам предложили... Просто добавьте свойство анимации transition: text-shadow .3s, color .3s; И в сам элемент и в :hover этого элемента.

БЛОГ НА HUSL

Обрыв анимации при наведении

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