1

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

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; 
}

4 ответа 4

2

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

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>

5
0

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

0

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>

0

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.