wipeIn & wipeOut

Otro efecto que posee Dojo es el de limpiar. Consiste en cambiar la altura de un nodo mientras que deja sólo el contenido. Esto hace que parezca que alguien está usando un limpiaparabrisas en el nodo. A menudo, el borrado puede ser un efecto útil para crear algo como un menú desplegable en una página, donde es posible que tenga algún tipo de contenido o configuración poco frecuente, o tal vez simplemente prefiera que se reduzca el descoloramiento. Para ello utilizamos fx.wipeIn y fx.wipeOut Veamos un ejemplo

<button id="wipeOutButton">Desaparece el bloque</button>
<button id="wipeInButton">Aparece el bloque</button>

<div id="wipeTarget" class="red-block wipe">
    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/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {
        var wipeOutButton = dom.byId("wipeOutButton"),
                wipeInButton = dom.byId("wipeInButton"),
                wipeTarget = dom.byId("wipeTarget");

        on(wipeOutButton, "click", function(evt){
            fx.wipeOut({ node: wipeTarget }).play();
        });
        on(wipeInButton, "click", function(evt){
            fx.wipeIn({ node: wipeTarget }).play();
        });
    });
</script>

Ejemplo en funcionamiento Código completo

results matching ""

    No results matching ""