Question

我有一个具有两个类box和shake的div，它们都带有附加的动画。当鼠标移到该框上时，我删除了shake类。发生这种情况时，我希望它只会停止抖动，而且从一开始就重新缩放元素，它还会播放box动画。为什么会发生这种情况以及如何避免呢？

我还希望box动画（缩放）在文档加载时发生。为什么不发生呢？一个元素一次只能分配一个动画吗？否则会覆盖吗？

$("#boxDiv").on("mouseenter", function(){
  $("#boxDiv").removeClass('shake');
});

$("#boxDiv").on("mouseleave", function(){
  $("#boxDiv").addClass('shake');
});

.box{
  display:block;
  width:100px;
  height:100px; 
  background:green;
  animation: scaleOnLoad .5s ease 1s;
}

@keyframes scaleOnLoad {
  0%{    
    transform: scale(.2);
  }
  100%{
    transform: scale(1);
  }
}

.shake {
  animation: shakeOnHover .1s linear infinite;
}

@keyframes shakeOnHover {
  0% { transform: rotate(1deg); }
  33% { transform: rotate(0deg); }
  66% {  transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="boxDiv" class="box shake"></div>

Answer 1

您可以使用以下动画结束事件来分隔动画：

$(".box.loading").on("animationend", function(event){
  let box = $(event.target);
  box.removeClass('loading');
  box.addClass('shake');
});

$(".box").on("mouseenter", function(event){
  let box = $(event.target);
  if (!box.hasClass("loading")) {
    box.removeClass('shake');
  }
});

$(".box").on("mouseleave", function(){
  let box = $(event.target);
  if (!box.hasClass("loading")) {
    $(".box").addClass('shake');
  }
});

.box {
  display:block;
  width:100px;
  height:100px; 
  background:green;
}

.loading {
  animation: scaleOnLoad .5s ease;
}

@keyframes scaleOnLoad {
  0%{    
    transform: scale(.2);
  }
  100%{
    transform: scale(1);
  }
}

.shake {
  animation: shakeOnHover .1s linear infinite;
}

@keyframes shakeOnHover {
  0% { transform: rotate(1deg); }
  33% { transform: rotate(0deg); }
  66% {  transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box loading"></div>

Answer 2

从描述中听起来，boxDiv似乎同时设置了类框和类摇。

由于.shake在CSS中的.box之后，因此.shake中设置的任何值都将覆盖.box中的任何设置。如果有人说将background-color设置为red，则会发生这种情况。动画也是如此-摇一摇会覆盖框一。

因此，在加载盒子时会摇动但不会缩放。尝试让boxDiv仅包含box类。

然后，当您添加和删除框并摇动类时，div将只有一个。

如何避免悬停时重新缩放？

2 个答案: