Encadenar animaciones con dojo/fx/chain

¿Qué pasa si queremos que se realicen animaciones en secuencia? Es bastante común. El módulo dojo/fx nos proporciona un par de métodos para configurar los efectos y hacer que se ejecuten en secuencia o en paralelo. Cada método devuelve un nuevo objeto dojo/_base/fx::Animation con su propio conjunto de eventos y métodos que representan toda la secuencia. dojo/fx/chain es el método que nos permite encadenar animaciones. Este método recibe como parámetro un array con las animaciones que queramos encadenar. Veamos un ejemplo:

<button id="slideAwayButton">Mueve el bloque</button>
<button id="slideBackButton">Muévelo a la posición inicial</button>

<d
iv id="slideTarget" class="red-block slide chain">
    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/fx",
            "dojo/on",
            "dojo/dom",
            "dojo/domReady!"
        ], function (baseFx, fx, on, dom) {

            var slideAwayButton = dom.byId("slideAwayButton"),
                    slideBackButton = dom.byId("slideBackButton"),
                    slideTarget = dom.byId("slideTarget");

            // En fx.chain introducimos como parámetro un array
            // con las animaciones que queramos
            on(slideAwayButton, "click", function(evt){
                fx.chain([
                    baseFx.fadeIn({ node: slideTarget }),
                    fx.slideTo({ node: slideTarget, left: "200", top: "200" }),
                    baseFx.fadeOut({ node: slideTarget })
                ]).play();
            });
            on(slideBackButton, "click", function(evt){
                fx.chain([
                    baseFx.fadeIn({ node: slideTarget }),
                    fx.slideTo({ node: slideTarget, left: "0", top: "100" }),
                    baseFx.fadeOut({ node: slideTarget })
                ]).play();
            });

        });
    </script>

Ejemplo en funcionamiento Código completo