CSS过渡 - 两个方向？ [英] CSS Transition - two directions?

问题描述

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

Here is a crude example to help show what I would like: http://jsfiddle.net/GVaNv/

我想知道是否还有从左边开始覆盖转换

I was wondering if there is anyway to make the overlay transition in from the left, but to then leave from the right side.

因此，在悬停时，叠加层就像在示例中一样，但不是向后退回到转换在右边。

So, on hover, the overlay comes in as it is in the example, but instead of retreating back to the left, to transitions to the right.

这是可能吗？ （不一定需要使用 transition ，我愿意以任何方式这样做。）

Is this possible? (doesn't necessarily need to use transition, I'm open to any way to do it).

推荐答案

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

Here is a simple solution that does not require more HTML or JavaScript:

HTML代码： / p>

HTML Code:

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

CSS代码：

.box {
    height: 250px;
    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;
}

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

This leverages the margin for the animation. It works as follows:

1. 覆盖休息状态设置在元素的右边，使用边距（而 left 位于元素的左侧。）


2. 悬停时，我们将边距设置为 0 没有动画。这允许左动画从元素的左侧发生。


3. 鼠标悬停时，边距是动画的到元素右侧的静止状态。

1. The overlay resting state is set to the right of the element using a margin (while the left is positioned to the left of the element).
2. Upon hover, we set the margin to 0 without an animation. This allows the left animation to occur from the left side of the element.
3. Upon mouse-out, the margin is animated to go to its resting state on the right side of the element.

JSFiddle

这篇关于CSS过渡 - 两个方向？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！