Animar propiedades

Los elementos tienen innumerables propiedades con valores unitarios que podríamos animar. Supongamos que queremos destellar el fondo, o mover el nodo alrededor de la pantalla. Para eso necesitamos la utilidad de animación genérica de Dojo, baseFx.animateProperty. Veamos un ejemplo:

<button id="startButton">Aumenta bordes</button>
<button id="reverseButton">Encoge bordes</button>

<div id="borderbox" class="box" style="border-style:outset">
    <div class="innerBox">Caja</div>
</div>

Como podemos apreciar, constamos de dos botones. Uno para aumentar el borde de la caja y otro para disminuirlo. También de una caja borderbox

require(["dojo/_base/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(baseFx, on, dom) {
                var startButton = dom.byId("startButton"),
                    reverseButton = dom.byId("reverseButton"),
                    borderbox = dom.byId("borderbox");

                    // Establecemos el controlador on 
                    on(startButton, "click", function(evt){
                        baseFx.animateProperty({
                            node: borderbox,
                            properties: { borderWidth: 100 }
                        }).play();
                    });

Lo que hemos establecido es que al hacer click en el botón startButton se desencadene una función. En esa función tendrá lugar la animación del borderbox, estableciéndole un ancho igual a 100.
Ejemplo en funcionamiento Código completo

results matching ""

    No results matching ""