这是一个粗略的示例，可以帮助展示我想要的内容：http://jsfiddle.net/GVaNv/ http://jsfiddle.net/GVaNv/
我想知道是否有办法制作叠加层transition从左侧进入，然后从右侧离开。
因此，在悬停时，叠加层会像示例中那样出现，但不会退回到左侧，而是会退回到左侧。transition向右。
这可能吗？ （不一定需要使用transition，我愿意以任何方式做到这一点）。
这是一个不需要更多 HTML 或 JavaScript 的简单解决方案：
.box {
height: 100px;
width: 250px;
background: aqua;
position: relative;
overflow: hidden;
}
.overlay {
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
color: white;
padding: 10px;
left: -270px;
margin-left: 520px;
bottom: 0;
transition: left 300ms linear, margin-left 300ms ease-out;
}
.box:hover .overlay {
left: 0;
margin-left: 0;
transition: left 300ms ease-out;
}
<div class="box">
<div class="overlay">
Overlay
</div>
</div>
这利用了动画的边距。其工作原理如下：
- 覆盖静止状态使用边距设置在元素的右侧（而
left位于元素的左侧）。
- 悬停时，我们将边距设置为
0没有动画。这允许left动画从元素的左侧发生。
- 鼠标移开后，边距会以动画方式转至元素右侧的静止状态。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
