CSS Transition - 两个方向？

Question

这是一个粗略的例子来帮助展示我想要的东西:http://jsfiddle.net/GVaNv/

我想知道是否有办法让叠加 transition 从左侧进入，然后从右侧离开。

因此，在悬停时，叠加层会像示例中那样出现，但不会退回到左侧，而是向右transition。

这可能吗？ (不一定需要使用 transition，我愿意接受任何方式)。

Answer 1

这是一个不需要更多 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>

这利用了动画的边距。它的工作原理如下:

1. 叠加静止状态使用边距设置在元素的右侧(而 left 位于元素的左侧)。
2. 悬停时，我们将边距设置为 0，但没有动画。这允许 left 动画从元素的左侧出现。
3. 在鼠标移开时，边距会动画化以转到其在元素右侧的静止状态。