动画在空白处跳跃

Jumping of animation on empty space

本文关键字：跳跃 空白处 动画      更新时间：2023-09-26

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.跳一到两次，然后继续离开屏幕

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

绕过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>

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

相关文章：