javascript - 如何暂时禁用元素的 CSS 悬停触发动画？

Question

考虑这个 slider :

$(function() {
  var $volumeBar = $('#Volume-Bar');
  var $volumeContainer = $('#Volume-Container');
  var $value = $('.value');

  $volumeContainer.on('mousedown', function(event) {
    var height = $volumeContainer.height();
    var top = $volumeContainer.position().top;
    var startingCoord = event.clientY - top;
    var currentCoord;
    var percent;
    var difference;
    seekingVol = true;
    $volumeBar.css({
      'background-color': '#dcb311',
    });
    $volumeContainer.on('mouseup mouseleave', function() {
      if (seekingVol) {
        seekingVol = false;
        $volumeBar.css({
          'background-color': '',
        });
      }
    });
    $volumeContainer.on('mousemove', function(event) {
      if (seekingVol) {
        currentCoord = event.clientY - top;
        percent = ((height - currentCoord) / height) * 100;
        $volumeBar.finish();
        $volumeBar.css({
          'height': percent + '%'
        });
      }
    });
  });
});

@import url(https://fonts.googleapis.com/css?family=Bitter:700);
#Volume-Container {
  position: relative;
  width: 75px;
  height: 150px;
  background-color: #0e2030;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#Volume-Bar {
  position: absolute;
  bottom: 0px;
  height: 30%;
  width: 100%;
  background-color: #6ab2f2;
  transform-origin: bottom;
}

#Volume-Bar:hover {
  background-color: #dcb311;
  animation: Vert-Bounce 0.6s;
}

@keyframes Vert-Bounce {
  0% {
    transform: height(1);
  }
  25% {
    transform: scaleY(1.3);
  }
  50% {
    transform: scaleY(1);
  }
  75% {
    transform: scaleY(1.15);
  }
  100% {
    transform: scaleY(1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Volume-Container">
  <div id="Volume-Bar"></div>
</div>

注意到悬停时栏上的弹跳动画了吗？

当用户向上拉动条时，由于条的缩放和鼠标移动之间存在滞后，鼠标退出元素。当元素追上鼠标或用户向下拉回鼠标时，将在鼠标重新进入元素时触发另一个悬停事件。这会在用户拖动栏时多次触发弹跳动画。我想在 mousedown 上禁用此动画并在 mouseup 上重新激活它。

我该怎么做？

Answer 1

如果我理解得很好，弹跳动画发生在拖动时。
这就是问题所在。

我尝试了一些可能感兴趣的东西。我在事件监听器函数中使用了 mouseover 和 mouseout 事件...而不是 CSS hover 来处理弹跳效果。

$(function() {

  var $volumeBar = $('#Volume-Bar');
  var $volumeContainer = $('#Volume-Container');
  var $value = $('.value');

  $volumeBar.on('mouseover', function(event) {      // Added this event function
    $volumeBar.css({"background-color":"#dcb311","animation":"Vert-Bounce 0.6s"});
  });

  $volumeBar.on('mouseout', function(event) {       // Added this event function
    $volumeBar.css({"background-color":"#6ab2f2","animation":"initial"});
  });

  $volumeContainer.on('mousedown', function(event) {
    var height = $volumeContainer.height();
    var top = $volumeContainer.position().top;
    var startingCoord = event.clientY - top;
    var currentCoord;
    var percent;
    var difference;
    seekingVol = true;
    $volumeBar.css({
      'background-color': '#dcb311',
    });
    $volumeContainer.on('mouseup mouseleave', function() {
      if (seekingVol) {
        seekingVol = false;
        $volumeBar.css({
          'background-color': '',
        });
      }
    });
    $volumeContainer.on('mousemove', function(event) {
      if (seekingVol) {
        currentCoord = event.clientY - top;
        percent = ((height - currentCoord) / height) * 100;
        $volumeBar.finish();
        $volumeBar.css({
          'height': percent + '%'
        });
      }
    });
  });
});

参见 fiddle :https://jsfiddle.net/Bes7weB/8fpqxhoe/

注意:
我给它添加了一个 6px 的填充:为了防止鼠标在拖动时 mouseout。
这可能是个问题...