javascript - 学习道场 : Chaining animations on a collection of objects

Question

我正在使用 dojo 做一些基本练习以学习它的语法和方法。

我在下面创建了一个简化示例，目的是学习一组项目的链接动画。

有人可以对我创建的 dojo 代码提供一些反馈吗？在这种情况下我是否使用了正确的库功能？您认为哪个 dojo 选项是此用例的最佳解决方案？

作为引用，在 jQuery 中，我将通过以下方式完成此操作:

$(function() {
    // jQuery
    $('div').fadeOut().fadeIn();
})

对于 dojo 解决方案，我提出了四种依赖于不同 dojo 组件的解决方案:

// dojo
dojo.require("dojo.fx");
dojo.require("dojo.NodeList-fx");

dojo.addOnLoad(function() { 

    // Option 1: Using dojo.js only
    dojo.forEach(dojo.query('div'), function(div) {
        dojo.fadeOut({
            node: div,
            'onEnd': function() {
                dojo.fadeIn({
                    node: div
                }).play();
            }
        }).play()
    });    

    // Option 2: Using dojo.js and dojo.fx
    dojo.forEach(dojo.query('div'), function(div) {
        dojo.fx.chain([dojo.fadeOut({node: div}), dojo.fadeIn({node: div})]).play();
    });

    // Option 3: Using dojo.js, dojo.fx and dojo.NodeList-fx
    var divs = dojo.query("div");
    divs.fadeOut({
        'onEnd': function() {
            divs.fadeIn().play();
        }
    }).play()

    // Option 4: Using base, dojo.fx and dojo.NodeList-fx
    var divs = dojo.query('div');
    dojo.fx.chain([divs.fadeOut(), divs.fadeIn()]).play();

});

Answer 1

我的建议如下:

1. 进行基准测试，看看什么最有效。
2. 使用您觉得最舒服的任何东西。
3. Imo 选项 4 是最好的。
4. 转到 freenode 上的#dojo channel 。那里有很棒的人(包括我)可以帮助您解决任何问题。