Question

这是一个粗略的例子，可以帮助展示我想要的内容：http://jsfiddle.net/GVaNv/

我想知道是否还有从左侧开始覆盖transition但是从右侧离开。

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

这可能吗？（不一定需要使用transition，我可以通过任何方式开展此活动。）

Answer 1

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

HTML代码：

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

这可以利用动画的余量。它的工作原理如下：

使用边距将叠加静止状态设置在元素的右侧（而left位于元素的左侧）。
悬停时，我们将边距设置为0而没有动画。这允许left动画从元素的左侧发生。
在鼠标移出时，边缘会动画显示为元素右侧的静止状态。

JSFiddle

Answer 2

我尝试使用包含附加div标记的CSS实现此目的，如下所示 DEMO

<强> HTML

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

<强> CSS

.box {
    height: 250px;
    width: 250px;
    background: aqua;
    position: relative;
    overflow: hidden;
}

.overlay, .overlayFalse {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    width: 96%;
    color: white;
    padding: 2%;
    right:-274px;
    bottom: 0;
    transition: right 300ms ease-out, left 300ms ease-out;

}

.overlayFalse{
    opacity:0;
    right:auto;
    left:-274px;
}

.box:hover .overlay {
    right:0;
    opacity:0;
}

.box:hover .overlayFalse{
    opacity:1;
    left:0;
}

Answer 3

也许您可以使用CSS3 Animations，使用一个滑入，另一个滑出：

@keyframes overlay-in {
  from {
    left: -999px;
  }

  to {
    left: 0;
  }
}

@keyframes overlay-out {
  from {
    left: 0;
  }

  to {
    left: 999px;
  }
}

现在，您可以在overlay-in上应用:hover动画，在正常元素定义上应用另一个动画：

.box .overlay {
    /* other definitions ... */
    animation-name: overlay-out;
    animation-duration: 1000ms;
    animation-fill-mode: none;
}

.box:hover .overlay {
    animation-name: overlay-in;
    animation-duration: 600ms;
    animation-fill-mode: forwards;
}

但是有一个问题：幻灯片播放动画将在页面加载时播放一次。如果没有微小的JavaScript，我无法找到一种方法来阻止这种情况，在第一个mouseout事件的叠加层中添加了一个类。我已经在JSFiddle中这样做了。

但是，当然，只要您需要JavaScript，您也可以使用简单的转换。但是，如果您可以使用在页面加载时播放的动画，则此方法即使没有JavaScript也可以使用。

CSS Transition - 两个方向？

3 个答案: