如何处理转换:translateY行为

Question

我有一个代表卡片的<div>元素的问题。悬停时，它应该向上平移20像素。这是它的代码(如果是这样的话，我还包括了动画(：

@keyframes Appear {
from {
transform: translateY(2em);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
div {
width: 32%;
overflow: hidden;
transition: 0.3s ease-out;
height: 500px;
margin: 0 calc(4% / 4) 20px;
border-radius: 7.5px;
animation: Appear 0.4s ease-out;
animation-fill-mode: backwards;
opacity: 1;
transform: translateY(0);
}
div:hover {
transform: translateY(-20px);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

问题是，当我将<div>从元素下悬停时，它首先被向上平移，但随后在光标处开始颤抖。这只是一个视觉缺陷，但有没有办法以某种方式避免这种行为？提前非常感谢。

Answer 1

如果你将底部边缘悬停，它会向上移动，你的光标不会再悬停它，所以它会向下移动到你的光标下，被悬停，等等…你可以用一个伪元素来弥补这一空白，并保持悬停状态。

.card-wrap {
width: 32%;
transition: 0.3s ease-out;
height: 500px;
margin: 0 calc(4% / 4) 20px;
border-radius: 7.5px;
opacity: 1;
transform: translateY(0);

position: relative; /* To contain the pseudo */
overflow: visible; /* To allow the pseudo to overflow */

background: red; /* For demo purposes */
}
.card-wrap:hover {
transform: translateY(-20px);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.card-wrap::after {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 0;
transition: inherit;
background: blue; /* For demo purposes */
}
.card-wrap:hover::after {
height: 20px;
}
.card { 
width: 100%;
height: 100%;
overflow: hidden;
}

<div class="card-wrap"><div class="card"></div></div>

正如你所看到的，我不得不更改overflow: hidden来实现这一点。为了应对这种情况，必须引入一个新的元素来重新应用overflow: hidden。

还有其他方法可以实现这一点，希望这能让你走上正轨。