javascript - 动画在空白处的跳跃

Question

HTML:

<div class="wrap">
     <span class="button"></span>
     <div class="element"></div>
</div>

JS:

$('.button').on('mouseenter', function () {
  $('.element').addClass('active');
}).on('mouseleave', function () {
  $('.element').removeClass('active');
});
$('.element').on('mouseenter', function () {
  $('.element').addClass('active');
}).on('mouseleave', function () {
  $('.element').removeClass('active');
});    

http://jsfiddle.net/e4p98cwb/1/

当您将鼠标悬停在黑色元素上时，蓝色元素会进入屏幕。在那之后，如果你在空白处悬停一秒钟，蓝色的开始离开屏幕，但如果你快速悬停在它占据的空白处，那么可能会发生两件事: 1. 蓝色的返回完全显示在屏幕上 或者 2. 跳一两次然后继续离开屏幕

悬停和鼠标悬停事件也是如此。为什么会发生这种情况，是否有解决此行为的方法？

Answer 1

解决 JS 问题的最简单方法就是让 CSS 来处理它。如果将此添加到 :hover 状态，它将起作用:

.button:hover + .element,
.element:hover {
    -webkit-transform: translateX(0);
    transform: translateX(0);    
}

请参阅下面的实现。这也为您节省了大量的 JS。

.wrap {
    position: relative;
    width: 600px;
    height: 600px;
    overflow: hidden;
    border: 2px solid red;
}
.button{
    width: 100px;
    height: 50px;
    display: block;
    background: #333;
}
.element {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99999;
    width: 500px;
    height: 630px;
    background: blue;
    -webkit-transform: translateX(630px);
    transform: translateX(630px);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;    
}
.button:hover + .element,
.element:hover {
    -webkit-transform: translateX(0);
    transform: translateX(0);    
}

<div class="wrap">
    <span class="button"></span>
    <div class="element"></div>
</div>

更新

发生这种情况的原因是元素本身仍然占据相同的空间。这与翻译有关，实际上不是移动元素，而是转换元素。一旦您将光标从任何可激活的元素上移开，它就会缩回，但由于它正在动画，它仍然占据相同的空间，从而可以将鼠标悬停在该空间上并重新触发动画。我相信这是因为此变换仅在完成动画后才完全应用。让我们来检验这个理论:

.wrap {
    position: relative;
    width: 600px;
    height: 600px;
    overflow: hidden;
    border: 2px solid red;
}
.button{
    width: 100px;
    height: 50px;
    display: block;
    background: #333;
}
.element {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99999;
    width: 500px;
    height: 630px;
    background: blue;
    right: -100%;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;    
}
.button:hover + .element,
.element:hover {
    right: 0;   
}

<div class="wrap">
    <span class="button"></span>
    <div class="element"></div>
</div>

在这一个中，我们只是简单地使用绝对 定位，问题就消失了，这意味着tranform 实际上导致元素仍然占据相同的空间。直到动画结束。