防止 CSS 过渡在多个鼠标输入时重叠

Question

所以，我有这个svg，可以在悬停时触发轮廓动画。问题是，如果我在动画尚未完成时继续断断续续地悬停，它会完全中断序列，事情开始变得混乱和不同步。

我希望一旦svg悬停，动画就会不间断地执行到最后，无论它是否仍然悬停。然后，只有当整个动画已经完成时，用户才能再次触发它。

我相信有一个简单的解决方案，但我对jQuery很陌生，所以我真的不知道如何很好地处理它。

$(".main-logo").mouseleave(function() {
  $(".draw").bind('animationiteration webkitAnimationIteration', function() {
    $(this).removeClass("anim");
    $(".draw").unbind('animationiteration webkitAnimationIteration');
  });
});
$(".main-logo").mouseenter(function() {
  $(".draw").addClass("anim");
  console.log(1);
});
$(".main-logo").mouseleave(function() {
  $(".draw2").bind('animationiteration webkitAnimationIteration', function() {
    $(this).removeClass("anim");
    $(".draw2").unbind('animationiteration webkitAnimationIteration');
  });
});
$(".main-logo").mouseenter(function() {
  $(".draw2").addClass("anim");
  console.log(1);
});
$(".main-logo").mouseleave(function() {
  $(".logo-box").bind('animationiteration webkitAnimationIteration', function() {
    $(this).removeClass("anim");
    $(".logo-box").unbind('animationiteration webkitAnimationIteration');
  });
});
$(".main-logo").mouseenter(function() {
  $(".logo-box").addClass("anim");
  console.log(1);
});

.logo-box {
  padding: 0px 0px 0px 0px;
  background: transparent;
  text-align: center;
  transition: all .45s ease;
  width: 80%;
  margin: 30px 0px 0px 70px;
}
.logo-box.anim {
  transform: scale(1.07) translateY(5px);
  transition: all .15s ease;
}
.draw {
  fill: #000;
}
.draw2 {
  position: relative;
  fill: #fbd100;
}
.draw.anim {
  stroke: #fbd100;
  stroke-width: 4px;
  stroke-dasharray: 815;
  stroke-dashoffset: 815;
  animation: animate 1.5s ease-in;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-delay: 0s;
}
.draw2.anim {
  transform: scale(0);
  animation: animate2 .5s ease;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-delay: 1.40s;
}
@keyframes animate {
  to {
    stroke-dashoffset: 0;
  }
  0% {
    fill: #000
  }
  4% {
    fill: transparent
  }
  60% {
    fill: transparent
  }
  95% {
    stroke-width: 4px;
  }
  100% {
    fill: #000;
    stroke-width: 0px;
  }
}
@keyframes animate2 {
  0% {
    transform: scale(0)
  }
  70% {
    transform: scale(1.2)
  }
  100% {
    transform: scale(1)
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="logo-box">
  <svg version="1.1" class="main-logo" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="40px" y="0px" viewBox="0 0 700 300" style="enable-background:new 0 0 650 269;" xml:space="preserve">
		<rect class="draw" width="700" height="800" />
    <g transform="translate(535,146)">
      <rect class="draw2" width="130" height="130"/>
    </g>
  </svg>
</div>

Answer 1

你不需要鼠标离开，只需捕获动画结束并删除css中的迭代。

$(".draw, .draw2").on('animationend webkitAnimationEnd', function() {
  $(this).addClass("done");
  if (!$(".draw:not(.done), .draw2:not(.done)").length) {
    $(".draw.done, .draw2.done").removeClass("anim").removeClass("done");
  }
});
$(".main-logo").mouseenter(function() {
  $(".draw, .draw2").addClass("anim");
});

.logo-box {
  padding: 0px 0px 0px 0px;
  background: transparent;
  text-align: center;
  transition: all .45s ease;
  width: 80%;
  margin: 30px 0px 0px 70px;
}
.logo-box.anim {
  transform: scale(1.07) translateY(5px);
  transition: all .15s ease;
}
.draw {
  fill: #000;
}
.draw2 {
  position: relative;
  fill: #fbd100;
}
.draw.anim {
  stroke: #fbd100;
  stroke-width: 4px;
  stroke-dasharray: 815;
  stroke-dashoffset: 815;
  animation: animate 1.5s ease-in;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}
.draw2.anim {
  transform: scale(0);
  animation: animate2 .5s ease;
  animation-fill-mode: forwards;
  animation-delay: 1.40s;
}
@keyframes animate {
  to {
    stroke-dashoffset: 0;
  }
  0% {
    fill: #000
  }
  4% {
    fill: transparent
  }
  60% {
    fill: transparent
  }
  95% {
    stroke-width: 4px;
  }
  100% {
    fill: #000;
    stroke-width: 0px;
  }
}
@keyframes animate2 {
  0% {
    transform: scale(0)
  }
  70% {
    transform: scale(1.2)
  }
  100% {
    transform: scale(1)
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="logo-box">
  <svg version="1.1" class="main-logo" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="40px" y="0px" viewBox="0 0 700 300" style="enable-background:new 0 0 650 269;" xml:space="preserve">
		 <rect class="draw" width="700" height="800" />
     <g transform="translate(535,146)"><rect class="draw2" width="130" height="130"/></g>
  </svg>
</div>