Переход CSS - два направления?

Вот грубый пример, который поможет показать, что мне хотелось бы: http://jsfiddle.net/GVaNv/

Мне было интересно, если в любом случае сделать накладку transition слева, а затем оставить с правой стороны.

Итак, при наведении наложение появляется, как и в примере, но вместо того, чтобы отступать назад влево, до transition вправо.

Возможно ли это? (необязательно использовать transition, я открыт для любого способа сделать это).

Ответы

Ответ 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>

Ответ 2

Я пытался добиться этого только с помощью CSS, включая добавочную разметку div, следующим образом 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;
}

Ответ 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, если вы можете жить с анимацией, играющей при загрузке страницы.