Comment utiliser les transformations CSS pour faire glisser une div sur l'écran?

Ma page Web a deux divs, A et B. Div A est visible, Div B est caché. Lorsque l'utilisateur clique sur un lien dans la division A, je souhaite "faire coulisser" l'écran div A (en partant du bord gauche) et faire glisser la div B sur l'écran (entrée par le bord droit). J'ai trouvé que les animations de jquery sont très lentes sur l'ipad, donc je veux utiliser les animations CSS webkit à la place, qui je crois sont rendues dans le matériel. Comment puis-je faire cela?Comment utiliser les transformations CSS pour faire glisser une div sur l'écran?

Source

2010-06-06 Colen

Juste pour être persistant, il s'agit de CSS * transitions * ou d'animations CSS. Les transformations CSS sont lorsque vous modifiez la forme d'un objet. –

@ PaulD.Waite transformer: traduire (x, y) ne fait que changer de position, pas de forme. Droite? – MdaG

@MdaG: ah oui, très vrai. –

Ci-dessous un exemple montrant comment faire cela avec des animations webkit. Vous pouvez également lire cet article pour plus d'informations sur le sujet: http://webkit.org/blog/138/css-animation/

Les coins arrondis indiquent simplement que la page se déplace hors de l'écran, pas seulement en changeant la largeur.

L'idée principale est d'animer la propriété CSS de gauche et d'utiliser un conteneur div pour effectuer un découpage.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
    width: 50px; 
    height: 50px; 
    -webkit-border-radius: 15px; 
} 

#left { 
    position: absolute; 
    background-color: blue; 
    -webkit-transition: left 1s ease-in; 
} 

#right { 
    position: absolute; 
    left: 50px; 
    background-color: green; 
    -webkit-transition: left 1s ease-in; 
} 

#left.animate { 
    left: -50px; 
} 

#right.animate { 
    left: 0px; 
} 

#container { 
    position: relative; 
    overflow:hidden; 
} 
</style> 
<script> 

function animate() { 
    document.getElementById('left').className = 'animate'; 
    document.getElementById('right').className = 'animate'; 
} 
</script> 
</head> 
<body> 
<div id='container'><div id='left'></div><div id='right'></div></div> 
<input type='button' onclick='animate();' value='Animate!'></input> 
</body> 
</html>

Source

2010-06-06 23:24:42 tstanis

votre exemple ici avec [jsfiddle] (http://jsfiddle.net/onigetoc/bB5sK/ "jsfiddle"). – Gino

Pour que la div #left "glisse", vous devez lui donner "left: 0px;" initialement: http://jsfiddle.net/7QWGj/ – Harmon

Comment utiliser les transformations CSS pour faire glisser une div sur l'écran?

Répondre

Questions connexes