javascript - 如何阻止 CSS 动画干扰 CSS 转换过渡？

Question

假设我有一个盒子，当鼠标悬停在上面时我想摇晃它 - 一个细微的设计选择。但是当单击按钮时，我希望框向右转换。它会这样做，但即使我将 pointer-events: none 应用于元素，它仍然会对其 CSS 悬停效果使用react，告诉它摇摆，这会中断通过单击按钮激活的 CSS 转换.我不确定为什么 pointer-events: none 没有完成这项工作，

要观察此问题，请在按钮处于运动状态时将鼠标悬停在该框上。

如何在转换过渡过程中防止摆动动画中断？

$(function() {
  var $box = $('.box');
  var $button = $('.button');
  
  $button.on('click', function() {
    $box.css({
      'transform' : 'translateX(200px)',
      'pointer-events' : 'none !important'
    });
    setTimeout(function(){
    	$box.css({
      	'transform' : 'translateX(0px)',
        'pointer-events' : ''
    	});
    }, 3000);
  });
});

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800);

.box {
  background-color: lightgray;
  width: 100px;
  height: 100px;
  transition: transform 3s, background-color 1s;
}

.box:hover {
  background-color: gold;
  animation: wobble 1s;
}

.button {
  cursor:pointer;
  font-family: 'Open Sans', sans-serif;
  margin-top:10px;
  text-transform: uppercase;
  padding:10px;
  background-color:lightgreen;
  width:100px;
  height:40px;
  box-sizing:border-box;
  text-align:center;
}

@keyframes wobble {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="button">button</div>

Answer 1

您可以将摆动附加到一个类，并根据需要切换该类。我不确定您是否正在寻找它，但这个解决方案可以让盒子顺利地向左滑动。它还允许颜色移动效果保持有效。

$(function() {

  var $box = $('.box');
  var $button = $('.button');
  
  $button.on('click', function() {
    $box.removeClass("wobble");
    $box.addClass("slide");
    setTimeout(function() {
      $box.removeClass("slide");
      setTimeout(function(){ $box.addClass("wobble"); }, 3000);
    }, 3000);
  });

});

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800);

.box {
  background-color: lightgray;
  width: 100px;
  height: 100px;
  transform : translateX(0px);
  transition: transform 3s, background-color 1s;
}

.box:hover { background-color: gold; }
.box.wobble:hover { animation: wobble 1s; }
.box.slide { transform : translateX(200px); }

.button {
  cursor:pointer;
  font-family: 'Open Sans', sans-serif;
  margin-top:10px;
  text-transform: uppercase;
  padding:10px;
  background-color:lightgreen;
  width:100px;
  height:40px;
  box-sizing:border-box;
  text-align:center;
}

@keyframes wobble {
    0% { transform: rotate(0deg); }
   25% { transform: rotate(3deg); }
   75% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box wobble"></div>
<div class="button">button</div>