Paneles animados

Hace unos dias, implementé animaciones en los paneles de huayra-stopmotion. Al principio opté por usar la forma mas rudimentaria de mostrar y ocultar paneles, pero luego descubrí como implementarlo usando css3 y un poquito de javascript:

En este post me gustaría contarte cómo lo implementé, ya que puede resultarte útil a la hora de hacer algo similar.

Acá está la versión completa en jsfiddle:

El layout

Para mantener el maquetado lo mas sencillo posible, vamos a crear tres contenedores:

Un contenedor superior para el botón “alternar panel”.
Un panel principal.
Un panel alternativo que se pueda ocultar.

Así queda:

Luego, si el usuario pulsa el botón “alternar panel”, se debería ocultar el panel derecho:

Básicamente, armé los contenedores como bloques div:

<body>

		<div id='botones'>
			<a href='' id='alternar' class='boton'>alternar panel</a>
		</div>

		<div id='contenedor' class='contenedor'>Panel principal</div>
		<div id='panel' class='panel'>Panel Alternativo</div>
</body>

y en la hoja de estilos asigné posicionamiento absoluto y tamaño fijo a la clase panel:

	<style>

	.panel {
    	border: 1px solid #ff175e;
    	position: absolute;
    	top: 30px;
    	bottom: 0;
    	right: 0;
    	width: 300px;
    	text-align: center;
	}

	.contenedor {
		margin-top: 30px;
		text-align: center;
		margin-right: 300px;
		border: 1px solid gray;
	}

	</style>

Por cierto, también me aseguré de hacer que el contenedor principal tenga un margen derecho para que no se solape con el panel lateral.

Controles de visibilidad

Para ocultar y mostrar paneles podemos simplemente usar css.

Podemos crear una clase para representar el panel invisible (desplazado hacia la izquierda) y aplicarselo a un elemento del dom usando javascript.

Por ejemplo, para el panel lateral, hay dos clases importantes:

.panel {
  width: 300px;
}

.panel-invisible {
  right: -300px;
}

Es decir, ocultar el panel es simplemente moverlo a la izquierda, tantos pixeles como tenga de ancho, así queda fuera de la pantalla completamente.

Luego, para mostrar y ocultar dinámicamente, agregué un botón que asigna o quita la clase “panel-invisible”:

var botonAlternar = document.getElementById("alternar");

botonAlternar.onclick = function() {
  var panel = document.getElementById("panel");
  panel.classList.toggle("panel-invisible");
  return false;
};

Animaciones al ocultar y mostrar

Hasta ahora el panel debería ocultarse o mostrarse inmediatamente, sin animación alguna.

Este comportamiento produce un aspecto un poco extraño, no se puede percibir que el panel se oculta por la parte derecha de la pantalla, desaparece de manera abrupta.

Acá es donde podemos aplicar una transición css3: