Эффект наведения на кнопку с помощью: after element - Анимировать, когда мышь находится вне размеров кнопки - PullRequest
Новая
       17

Эффект наведения на кнопку с помощью: after element - Анимировать, когда мышь находится вне размеров кнопки

0 голосов
/ 18 декабря 2018

У меня определена анимация этой кнопки: JSFIDDLE

Код также включен сюда:

HTML 

<button>Hover to change color</button>

SCSS 

$blue: #0084ff;
$blue-darker: darken($blue, 5);

@keyframes mymove {
    0% {width: 0%}
    100%  {width: 80%}
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
button {
  margin: auto;
  background-color: $blue;
  border: 1px solid $blue;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  position: relative;
   &:hover {
    &:after {
      content: "";
      position: absolute;
      bottom: 3px;
      width: 80%;
      height: 2px;
      background-color: white;
      left: 0;
      right: 0;
      margin: auto;
      animation-name: mymove;
      animation-duration: .5s;
     }
  }
}

Это простая анимация при наведении.Проблема в том, что когда мышь покидает кнопку, элемент: after просто исчезает.Я хочу анимировать элемент: after, когда мышь уходит?- Как бы Вы это сделали?

Должен ли я изменить ключевой кадр, чтобы он также содержал противоположное направление?100% до 0%?или что-то еще?

РЕДАКТИРОВАТЬ:

В отличие от этот вопрос заключается в том, что мне нужно получить доступ к элементу после с кнопки.Я пытался с этим: 

@keyframes mymove-out {
    from {&:after {
      width: 80%
      }}
    to  {&:after {
      width: 0
    }}
}

И используя его на кнопке 

animation: mymove-out .5s ease;

Но это не работает.Как получить доступ к элементу after из ключевого кадра?

1 Ответ

0 голосов
/ 18 декабря 2018

Вы можете упростить свой код с помощью фоновой окраски и перехода: 

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

button {
  border: 1px solid #0084ff;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  background:
   linear-gradient(#fff,#fff) 50% calc(100% - 3px) no-repeat,
   #0084ff;
  background-size:0% 2px;
  transition:.5s all;
   
}

button:hover {
  background-size:80% 2px;
}
<button>Hover to change color</button>
...