我有一个相对简单的动画。当鼠标悬停在目标元素上时,它可以正常进行动画,但是当鼠标悬停在目标元素外部时,它不会过渡回原始位置,而是突然且不美观地回到原来的位置。
<article class="anim">
<a href="#foo">
<img src="https://dummyimage.com/240x200/ff9900/fff.png&text=TADA" alt="foo">
<span class="left">
<img src="https://dummyimage.com/240x200/121212/fff&text=hey+you" alt="left">
</span>
<span class="right">
<img src="https://dummyimage.com/240x200/000/fff&text=hey+you" alt="right">
</span>
</a>
</article>
以下是 scss
代码:
.anim {
$w: 240px;
$h: 200px;
width: $w;
height: $h;
overflow: hidden;
a {
display: block;
position: relative;
width: 100%;
height: 100%;
}
img {
z-index: 1;
position: absolute;
width: $w;
top: 0;
left: 0;
}
span {
display: block;
height: 100%;
width: 50%;
position: absolute;
z-index: 2;
overflow: hidden;
// This animation snaps back uglily.
transition: all cubic-bezier(.29, 1.01, 1, -0.68) 0.5s;
// This animation transitions back just fine...
//transition: all 0.5s ease-in 0s;
}
.left {
left: 0px;
}
.right {
right: 0px;
img {
margin-left: -100%;
}
}
a:hover > .left {
left: -100%;
}
a:hover > .right {
right: -100%;
}
}
我不理解的是被注释掉的动画(使用
easy-in
)可以平滑地进行过渡,但是使用cubic-bezier
的动画无法实现平滑过渡。我不知道这里缺少了什么。这是一个例子: https://codepen.io/FernandoBasso/pen/XqrOpV?editors=1100。