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

问题描述

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

我想知道是否还有从左边开始重叠转换，但是从右边离开。

因此，在鼠标悬停时，叠加层就像在示例中一样，但不是向后退回到 transition s。

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

解决方案

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

HTML代码： / p>

 < 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％; 
颜色：白色
 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; 
} 
  

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

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


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


3. 鼠标移开时，




JSFiddle




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.

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

解决方案

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

HTML Code:

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

CSS Code:

.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. 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屋！