¿Cómo uso las transformaciones CSS para deslizar un div en la pantalla?

Mi página web tiene dos divisiones, A y B. Div A es visible, Div B está oculta.¿Cómo uso las transformaciones CSS para deslizar un div en la pantalla?

Cuando el usuario hace clic en un enlace en div A, quiero "deslizar" div A fuera de la pantalla (dejando por el borde izquierdo), y deslizar div B en la pantalla (ingresando por el borde derecho).

He encontrado que las animaciones de jquery son muy lentas en el ipad, por lo que quiero usar las animaciones CSS del webkit, que creo que se representan en hardware. ¿Cómo hago esto?

Fuente

2010-06-06 Colen

Solo para ser perspicaz, son CSS * transiciones * o animaciones CSS. Las transformaciones CSS son cuando cambia la forma de un objeto. –

Transformación @ PaulD.Waite: translate (x, y) solo está cambiando la posición, no la forma. ¿Derecha? – MdaG

@MDAG: ah sí, muy cierto. –

A continuación se muestra un ejemplo que muestra cómo hacerlo con las animaciones de webkit. También puede leer este artículo para obtener más información: http://webkit.org/blog/138/css-animation/

Las esquinas redondeadas son solo para mostrar que la página se mueve fuera de la pantalla, no solo para cambiar el ancho.

La idea principal es animar la propiedad CSS izquierda y usar un contenedor div para hacer el recorte.

<!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>

Fuente

2010-06-06 23:24:42 tstanis

su ejemplo aquí con [jsfiddle] (http://jsfiddle.net/onigetoc/bB5sK/ "jsfiddle"). – Gino

Para tener el #left div "deslizado", debe darle "left: 0px;" inicialmente: http://jsfiddle.net/7QWGj/ – Harmon

¿Cómo uso las transformaciones CSS para deslizar un div en la pantalla?

Respuesta

Cuestiones relacionadas