Как предотвратить перезапуск CSS анимации после перехода? - PullRequest
Новая
       121

Как предотвратить перезапуск CSS анимации после перехода?

2 голосов
/ 19 июня 2020

Я сделал кнопку с маленькой вкладкой, которая при наведении на нее расширяется в сторону. Это потому, что я хочу, чтобы кнопку можно было перетаскивать. Итак, как только вкладка развернется, вы можете схватить ее и перетащить кнопку. Не обращайте внимания на сломанные значки, они должны быть там из пакета font awesome.

Однако я хотел проинформировать пользователя, что маленькую вкладку можно захватить, поэтому я сделал небольшой эффект покачивания в режиме ожидания, который воспроизводится два раза, показывая, что вкладка может расширяться. И как только пользователь наводит на него курсор, он полностью раскрывается. Однако, когда пользователь снимает курсор с вкладки, анимация начинается снова. Мне нужно, чтобы анимация запускалась только при загрузке страницы и повторялась ровно 2 раза и больше никогда. Почему анимация начинается после перехода, который есть при наведении курсора, и что я могу сделать, чтобы запретить ее повторную анимацию? Можно ли без JS?

Вот мой код 

.insite-draggable {
  z-index: 10;
  position: fixed;
  left: 45px;
  bottom: 12px;
}

.insite-handle {
  position: absolute;
  left: -14px;
  bottom: 13px;
  transition: left 0.3s cubic-bezier(0.32, 1.85, 0.43, 0.43);
  animation: bounce 2s;
  animation-iteration-count: 2;
  animation-delay: 2s;
}

.insite-handle:before {
  content: "\f100";
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-size: 16px;
  line-height: 16px;
  display: inline-block;
  background-color: #1ea2b1;
  cursor: move;
  color: #ffffff;
  height: 16px;
  width: 26px;
  padding: 3px 3px 3px 4px;
  border-radius: 7px 0px 0px 7px;
  border: 1px solid #1a8e9b;
  transition: padding-left 0.3s cubic-bezier(0.32, 1.85, 0.43, 0.43);
}

.insite-handle:hover {
  left: -27px;
  animation: step-end;

  &:before { 
    content: "\f0b2";
    padding-left: 5px; 
  }
}

@keyframes bounce {
  0% { left: -14px; }
  10% { left: -20px; }
  20% { left: -14px; }
  30% { left: -20px; }
  40% { left: -14px; }
  100% {left: -14px; }
}

.insite-btn {
  display: block;
  position: relative;
  top: auto;
  left: auto;
  bottom: auto;
  right: auto;
  font-family: 'BrixSansBold';
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1rem;
  -ms-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  color: #b00402;
  border: none;
  margin: 10px 10px 10px auto;
  padding: 7px 10px 7px 34px;
  text-decoration: none;
  text-transform: none;
  box-shadow: #333333 1px 1px 10px;
  background-color: #e3e000;
}
<span class="insite-draggable">
	<i class="insite-handle"></i>
  <a class="insite-btn" href="#">Turn on</a>
</span>

1 Ответ

1 голос
/ 19 июня 2020

Я использовал CSS Переменные с откатом. 

var(--use-this-variable-if-exist, use this fallback if no variable);

Первоначально значение --left отсутствует, поэтому используются резервные варианты. При наведении установите значение --left как -27px. Таким образом, ключевые кадры также обновляются. 

.insite-draggable {
  z-index: 10;
  position: fixed;
  left: 45px;
  bottom: 12px;
}

.insite-handle {
  position: absolute;
  left: -14px;
  bottom: 13px;
  transition: left 0.3s cubic-bezier(0.32, 1.85, 0.43, 0.43);
  animation: bounce 2s;
  animation-iteration-count: 2;
  animation-delay: 2s;
}

.insite-handle:before {
  content: "\f100";
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-size: 16px;
  line-height: 16px;
  display: inline-block;
  background-color: #1ea2b1;
  cursor: move;
  color: #ffffff;
  height: 16px;
  width: 26px;
  padding: 3px 3px 3px 4px;
  border-radius: 7px 0px 0px 7px;
  border: 1px solid #1a8e9b;
  transition: padding-left 0.3s cubic-bezier(0.32, 1.85, 0.43, 0.43);
}

.insite-handle:hover {
  left: -27px;
  --left: -27px;
  &:before {
    content: "\f0b2";
    padding-left: 5px;
  }
}

@keyframes bounce {
  0% {
    left: var(--left, -14px);
  }
  10% {
    left: var(--left, -20px);
  }
  20% {
    left: var(--left, -14px);
  }
  30% {
    left: var(--left, -20px);
  }
  40% {
    left: var(--left, -14px);
  }
  100% {
    left: var(--left, -14px);
  }
}

.insite-btn {
  display: block;
  position: relative;
  top: auto;
  left: auto;
  bottom: auto;
  right: auto;
  font-family: 'BrixSansBold';
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1rem;
  -ms-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  color: #b00402;
  border: none;
  margin: 10px 10px 10px auto;
  padding: 7px 10px 7px 34px;
  text-decoration: none;
  text-transform: none;
  box-shadow: #333333 1px 1px 10px;
  background-color: #e3e000;
}
<span class="insite-draggable">
	<i class="insite-handle"></i>
  <a class="insite-btn" href="#">Turn on</a>
</span>
...