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

Ejemplo en funcionamiento Código completo

results matching ""

    No results matching ""