CSS Transition - 两个方向？

Question

这是一个粗略的例子,以帮助显示我想要的:http://jsfiddle.net/GVaNv/

我想知道是否还有transition从左侧进行叠加,但是从右侧离开.

因此,在悬停时,叠加层会像示例中那样进入,但不是向后退到左侧,而是transition向右退回.

这可能吗？(不一定需要使用transition,我愿意以任何方式去做).

Answer 1

这是一个不需要更多HTML或JavaScript的简单解决方案:

HTML代码:

.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;
}

CSS代码:

<div class="box">
    <div class="overlay">
        Overlay
    </div>
</div>

这利用了动画的余量.它的工作原理如下:

1. 使用边距将叠加静止状态设置在元素的右侧(而left位于元素左侧的叠加静止状态).
2. 悬停时,我们将边距设置为0没有动画.这允许left动画从元素的左侧发生.
3. 在鼠标移出时,边缘被动画化以在元素的右侧进入其静止状态.

的jsfiddle