Desvanecer elementos
Una animación muy común en las aplicaciones es un elemento que se desvanece o aparece. Este efecto es tan común y simple que está incluido como parte de los efectos principales en dojo/_base/fx
. Podemos usarlo para ocultar o mostrar elementos en una página de una manera que se siente realmente suave y pulida usando fx.fadeIn
y fx.fadeOut
. Ejemplo:
<button id="fadeOutButton">Desvanece el bloque</button>
<button id="fadeInButton">Aparece el bloque</button>
<div id="fadeTarget" class="red-block">
Bloque rojo
</div>
<!-- load dojo and provide config via data attribute -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="async: true, isDebug: true"></script>
<script>
require(["dojo/_base/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {
var fadeOutButton = dom.byId("fadeOutButton"),
fadeInButton = dom.byId("fadeInButton"),
fadeTarget = dom.byId("fadeTarget");
on(fadeOutButton, "click", function(evt){
fx.fadeOut({ node: fadeTarget }).play();
});
on(fadeInButton, "click", function(evt){
fx.fadeIn({ node: fadeTarget }).play();
});
});
</script>`