Przenieś div z przejściem CSS

Question

Korzystam z poniższego kodu, aby wyświetlić ukryty element div po najechaniu myszą. Używam właściwości CSS transition do zanikania ukrytego elementu div. Czy możliwe jest przesuwanie w ukrytym (na przykład od lewej do prawej) div zamiast blaknięcia przy użyciu tylko CSS? Oto mój kod:

HTML

<div class="box"> 
    <a href="#"><img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg"></a> 
    <div class="hidden"></div> 
</div> 

CSS

.box{ 
    position: relative;  
} 

.box .hidden{  
    background: yellow; 
    height: 300px;  
    position: absolute; 
    top: 0; 
    left: 0;  
    width: 500px; 
    opacity: 0;  
    transition: all 1s ease; 
} 

.box:hover .hidden{ 
    opacity: 1; 
} 

Demo: http://jsfiddle.net/u2FKM/

Answer 1

Coś takiego?

DEMO

I kod użyłem:

.box{ 
    position: relative; 
    overflow: hidden; 
} 

.box:hover .hidden{ 

    left: 0px; 
} 

.box .hidden {  
    background: yellow; 
    height: 300px;  
    position: absolute; 
    top: 0; 
    left: -500px;  
    width: 500px; 
    opacity: 1;  
    -webkit-transition: all 0.7s ease-out; 
     -moz-transition: all 0.7s ease-out; 
     -ms-transition: all 0.7s ease-out; 
     -o-transition: all 0.7s ease-out; 
      transition: all 0.7s ease-out; 
} 

I może również dodać, że jest to możliwe, aby przenieść elment użyciu transform: translate();, która w tym przypadku może działać coś takiego - DEMO nr2

Answer 2

Tak jest to możliwe, ale nie jest obsługiwany przez wszystkie przeglądarki.

Zobacz w3schools

Answer 3

transition-property:width; 

To powinno działać. musisz mieć kod zależny od przeglądarki:

Answer 4

Dodałem prefiksy dostawcy i zmieniłem animację na all, więc masz zarówno przezroczystość, jak i szerokość, które są animowane.

Czy tego właśnie szukasz? http://jsfiddle.net/u2FKM/3/

Answer 5

To może być dobre rozwiązanie dla Ciebie: zmień kod tak jak ta bardzo mała zmiana

.box{ 
    position: relative; 
} 
.box:hover .hidden{ 
    opacity: 1; 
    width:500px; 
} 
.box .hidden{ 
    background: yellow; 
    height: 334px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 0; 
    opacity: 0; 
    transition: all 1s ease; 
} 

Zobacz demo here

Answer 6

Wystarczy dodać moją odpowiedź, wydaje się, że przejścia muszą być oparte na wartościach początkowych i końcowych wartości w obrębie właściwości CSS, aby móc zarządzać animacji.

te przerobione klas CSS powinien zapewnić oczekiwany wynik:

.box{ 
 
    position: relative; 
 
    top:0px; 
 
    left:0px; 
 
    width:0px; 
 
} 
 

 
.box:hover .hidden{ 
 
    opacity: 1; 
 
    width: 500px; 
 
} 
 

 
.box .hidden{  
 
    background: yellow; 
 
    height: 300px;  
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px;  
 
    width: 0px; 
 
    opacity: 0;  
 
    transition: all 1s ease; 
 
}

<div class="box"> 
 

 
    <a href="#"> 
 
     <img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg"></a> 
 
     <div class="hidden"></div> 
 

 
</div>

http://jsfiddle.net/u2FKM/2199/