move div mit CSS-Übergang

Question

Ich verwende folgenden Code, um ein verstecktes div bei Hover anzuzeigen. Ich verwende die Eigenschaft CSS transition, um das versteckte div einzublenden. Ist es möglich, das versteckte (z. B. von links nach rechts) div einzufügen, anstatt nur mit dem CSS einzublenden? Hier ist mein Code:

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

So ähnlich?

DEMO

Und der Code, den ich verwenden:

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

Ich kann auch hinzufügen, dass es möglich ist, eine elment mit transform: translate();, was in diesem Fall zu bewegen, könnte so etwas wie dies funktioniert - DEMO nr2

Answer 2

Ja, das ist möglich, wird jedoch nicht von allen Browsern unterstützt.

Siehe w3schools

Answer 3

transition-property:width; 

Diese funktionieren sollte. Sie müssen browserabhängigen Code haben

Answer 4

Ich habe die Hersteller-Präfixe hinzugefügt und die Animation in all geändert, so dass Sie sowohl Opazität und Breite, die animiert sind.

Ist das wonach Sie suchen? http://jsfiddle.net/u2FKM/3/

Answer 5

Dies könnte die gute Lösung für Sie sein: Ändern Sie den Code wie diese sehr kleine Änderung

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

Siehe demo here

Answer 6

Nur meine Antwort an, es scheint, dass die Übergänge auf Anfangswerte und Endwerte innerhalb der CSS-Eigenschaften auf Basis werden müssen um die Animation verwalten zu können.

Diese überarbeiteten CSS-Klassen sollten das erwartete Ergebnis liefern:

.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/