Get it on Google Play

Formación y Desarrollo UX: Transiciones con CSS 3

16-11-2016
 
UX

UX

Las transiciones con jQuery ya no se llevan, de hecho jQuery ya no se lleva. Ahora lo que se llevan son las transiciones por CSS que utilizan aceleración por hardware obteniendo una mejor experiencia de usuario. Además, usando CSS tenemos mejor independencia entre código y diseño.

Para crear transiciones en CSS utilizamos la propiedad ‘transition’ de la siguiente forma:

	transition: {propiedad} {tiempo en segundos} {función de tiempo} {retraso}

Donde la función del tiempo puede obtener los siguientes valores: ease, linear, ease-in, ease-out, ease-in-out o cubic-bezier(n,n,n,n). De esta manera, si queremos hacer que un DIV se despliegue podemos hacerlo así:

	transition: height 1s ease-in;

En el siguiente ejemplo podemos ver como haciendo click sobre u botón hacemos que un DIV aparezca:

<html>

<body>
	<style>
		#testbox {
			opacity: 0;
			width: 300px;
			height: 0px;
			background-color: red;
			}

		#testbox.test {
			opacity: 1;
			height: 300px;
			transition: opacity 1s ease-in-out, height 0.5s ease-in-out;
			}
	</style>

	<input type='button' value='Hola' onclick="javascript: document.getElementById('testbox').className='test';"/>

	<div id='testbox'></div>
</body>

</html>

Capturando el final de la transición

En ocasiones, tenemos que capturar el final de la transición para hacer algo. En javascript lo haríamos así:

document.getElementById("testbox").addEventListener("transitionend", function() {
	alert('la transición se terminó');
	});

Compatibilidad con navegadores antiguos

Si queremos mantener la compatibilidad con navegadores antiguos(Ahora mismo muy antiguos) lo haríamos de la siguiente manera:

transition: {propiedad} {tiempo en segundos} {función de tiempo} {retraso};
-webkit-transition: {propiedad} {tiempo en segundos} {función de tiempo} {retraso};
-moz-transition: {propiedad} {tiempo en segundos} {función de tiempo} {retraso};
-ms-transition: {propiedad} {tiempo en segundos} {función de tiempo} {retraso};
-o-transition: {propiedad} {tiempo en segundos} {función de tiempo} {retraso};

Y para capturar el evento con Javascript:

var element=document.getElementById("testbox");

element.addEventListener('webkitTransitionEnd', callfunction, false);
element.addEventListener('oTransitionEnd', callfunction, false);
element.addEventListener('transitionend', callfunction, false);
element.addEventListener('msTransitionEnd', callfunction, false);

function callfunction() {
   alert('la transición se terminó');
}
 

Leave a Reply