Как отключить эффект наведения на время перехода или анимации, а затем включить его после завершения перехода или анимации в css? - PullRequest
Новая
       20

Как отключить эффект наведения на время перехода или анимации, а затем включить его после завершения перехода или анимации в css?

1 голос
/ 12 апреля 2020

Я хочу отключить или отключить эффект наведения до завершения перехода, а затем снова активировать эффект наведения. Итак, я просто хочу отключить эффект наведения на определенное время, чтобы переход был завершен. Я уже использовал переход-задержку, но это не то, что я хочу. Заранее спасибо. Вот мой код. 

#one
{
    color: green;
    border: 0px solid red;
    border-radius: 8px;
    transition: transform 1s;
    transition-delay: 0.3s;
}
/*I want to disable this hover until the transition is over*/
#one:hover
{
    color: white;
    background-color: rgba(255,0,0,1);
    border: 2px solid white;
    border-radius: 8px;
    box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.8);
    transform: translate(-15px,-15px) rotate3d(1,1,1,360deg) scale(1.1);
}

1 Ответ

0 голосов
/ 12 апреля 2020

Я бы справился с этим с помощью анимации вместе с некоторыми JavaScript. Когда пользователь наводит указатель мыши на #one, мы добавляем класс hover к body, на который будет реагировать элемент #one. На этом этапе #one включает pointer-events: none, чтобы гарантировать, что любое дополнительное зависание не будет повторно запускать анимацию. После завершения анимации мы удаляем класс hover из body, позволяя анимации снова начинаться после регистрации нового события наведения мыши. 

const one = document.getElementById("one");

one.addEventListener("mouseover", () => {
  document.body.classList.add("hover");	
});

one.addEventListener("animationend", () => {
  document.body.classList.remove("hover");
});
@keyframes oneAnimation {
  to {
    transform: translate(-15px, -15px) rotate3d(1, 1, 1, 360deg) scale(1.1);
  }
}

#one {
  color: green;
  border: 0px solid red;
  border-radius: 8px;
}

.hover #one {
  pointer-events: none;
  color: white;
  background-color: rgba(255, 0, 0, 1);
  border: 2px solid white;
  border-radius: 8px;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.8);
  animation: oneAnimation 1s forwards 0.3s;
}
<div id="one">one</div>

jsFiddle

...