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