Продолжить переход с того места, где закончилась анимация - PullRequest
Новая
       54

Продолжить переход с того места, где закончилась анимация

4 голосов
/ 01 июня 2019

См. Следующую анимацию кнопок: 

html {
  background: white;
  font-family: Arial;
}

.button {
  position: relative;
  display: inline-block;
  color: #000;
  border: 2px solid #000;
  padding: 10px 24px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition-property: color, background, border-color;
  transition-duration: 0.3s;
}
.button:hover {
  color: #fff;
}
.button:hover ._background:after {
  transform: translateX(0);
  animation: fill-horizontal 0.3s linear 0s 1;
}
.button ._background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  overflow: hidden;
}
.button ._background:after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000;
  transform: translateX(100%);
  transition: transform .3s;
}

@keyframes fill-horizontal {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
<a class="button" href="javascript:">
  <div class="_background"></div>
  Button
</a>

Предполагаемая анимация - развернуть элемент ._background:after слева, а затем вправо следующим образом:

  1. translateX(-100%)
  2. translateX(0) - Наведение
  3. translateX(100%) - Убрать наведение

Пока анимация работает так, как задумано, когда пользователь наводит курсор на длительностьCSS-анимации (.3s) выглядит ужасно, если пользователь «откроется» до завершения CSS-анимации.

Я бы хотел, чтобы значения transition до translateX(100%) продолжались с того места, где animationзаконченный.Возможно ли это вообще?

ПРИМЕЧАНИЕ - Мне известно, что элемент div._background не нужен, он имеет дополнительные функциональные возможности, не относящиеся к этому вопросу.

1 Ответ

2 голосов
/ 01 июня 2019

Вы можете рассмотреть один и тот же эффект по-разному, чтобы избежать этого плохого эффекта:

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

.button {
  position: relative;
  display: inline-block;
  color: #000;
  border: 2px solid #000;
  padding: 10px 24px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  background-image:linear-gradient(#000,#000);
  background-size:0% 100%;
  background-position:left;
  background-repeat:no-repeat;
  background-origin:border-box;
  transition:color 0.3s, background-size 0.3s, background-position 0s 0.3s;
}
.button:hover {
  color:#fff;
  background-size:100% 100%;
  background-position:right;
}
<div class="button">Some text</div>

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

Хакерская идея заставить анимацию завершиться - рассмотреть псевдоэлемент, который увеличит область наведения, и быть уверенным, что вы удержите наведение до конца: 

.button {
  position: relative;
  display: inline-block;
  color: #000;
  border: 2px solid #000;
  padding: 10px 24px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  background-image:linear-gradient(#000,#000);
  background-size:0% 100%;
  background-position:left;
  background-repeat:no-repeat;
  background-origin:border-box;
  transition:color 0.3s, background-size 0.3s, background-position 0s 0.3s;
}
.button:hover {
  color:#fff;
  background-size:100% 100%;
  background-position:right;
}

.button:hover:before {
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:99;
  animation:remove 0s 0.3s forwards;
}
@keyframes remove {
  to {
    top:100%;
  }
}
<div class="button">Some text</div>
...