如何使用自定义绑定对使用 Knockout.js 中的 "foreach" 添加的元素进行动画处理

Question

我有一组图像，我想使用 knockout.js "foreach" 函数将它们添加到页面中，如下所示：

<div class="animation" data-bind="foreach: { data: frames }">
    <img data-bind="fadeInVisible: true" src="./media/test.jpg" />
</div>

我的自定义绑定是：

ko.bindingHandlers.fadeInVisible = {
    init: function (element, valueAccessor) {
        var value = ko.unwrap(valueAccessor()); // Get the current value of the current property we're bound to
        $(element).hide().delay("1000").fadeIn(); // jQuery will hide/show the element depending on whether "value" or true or false
    }
};

我的问题是他们都是同时进来的，我想让他们错开进来。有没有一种很好的方法来错开它们我可以使用敲除来做？

我想我可以在调用自定义绑定时使用 jQuery 队列向队列添加动画，然后在最后我可以运行动画队列，但我'我不知道该怎么做。

谢谢。

Answer 1

将延迟乘以foreach 循环中项目的索引。项目零将是 0*1000ms，项目 1 将有 1*1000ms 等的延迟。

HTML:

<div class="animation" data-bind="foreach: { data: frames }">
    <img data-bind="fadeInVisible: true" src="./media/test.jpg" />
</div>

Javascript:

ko.bindingHandlers.fadeInVisible = {
    init: function (element, valueAccessor) {
        var index = $index();
        $(element).hide().delay(index * 1000).fadeIn();
    }
};

如何使用自定义绑定对使用 Knockout.js 中的 "foreach" 添加的元素进行动画处理

How to use a custom binding to animate elements being added using "foreach" in Knockout.js

javascript

jquery

knockout.js

jquery-animate