web-dev-qa-db-fra.com

move div avec CSS transition

J'utilise le code suivant pour afficher une div cachée au survol. J'utilise la propriété CSS transition pour se fondre dans le div caché. Est-il possible de glisser dans le div caché (par exemple de gauche à droite) au lieu de se fondre dans le CSS uniquement?

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

Démo:http://jsfiddle.net/u2FKM/

htmlcsscss3
14
user1251698

Quelque chose comme ça?

DEMO

Et le code que j'ai utilisé:

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

J'ajouterai peut-être qu'il est possible de déplacer un élément à l'aide de transform: translate();, ce qui dans ce cas pourrait fonctionner dans les cas suivants - DEMO nr2

25
Christofer Vilander

Juste pour ajouter ma réponse, il semble que les transitions doivent être basées sur les valeurs initiales et les valeurs finales au sein des propriétés css pour pouvoir gérer l'animation.

Ces classes css retravaillées devraient fournir le résultat attendu:

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

3
Chris A

J'ai ajouté les préfixes du vendeur et changé l'animation en all, de sorte que l'opacité et la largeur soient animées.

Est-ce ce que vous cherchez? http://jsfiddle.net/u2FKM/3/

3
wakooka
transition-property:width;

Cela devrait marcher. vous devez avoir un code dépendant du navigateur

2
Shamis Shukoor

C'est peut-être la bonne solution pour vous: changez le code de la manière suivante

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

Voir démo ici

1
Surya Adhikari