使用 Knockout.js 绑定 CSS3 动画回调答案

【问题标题】：Bind CSS3 Animation Callback using Knockout.js使用 Knockout.js 绑定 CSS3 动画回调
【发布时间】：2012-05-03 23:58:06
【问题描述】：

我正在使用 Knockout.js 和 CSS3 动画为 iPad 构建“WebApp”。

不同页面之间的过渡是动画的。我想在动画结束时得到一个 JavaScript 回调。

现在我知道你可以像这样使用 Javascript 来捕获回调：

element.addEventListener(webkitAnimationEnd, function(){callfunction()},false);

但是没有更好的方法来做到这一点吗？ “淘汰方式”？我想在 DOM 中使用 data-bind 属性绑定回调函数，而不是在我的 javascript 代码中访问 DOM 元素！

有什么想法吗？

编辑：也许我应该补充一点，我是 Knockout.js 的新手，我不知道我想要做什么，或者更确切地说，我是如何尝试做的是有道理的，或者如果您只是按照传统方式进行操作！

【问题讨论】：

标签： javascript css knockout.js css-animations

【解决方案1】：

我使用jQuery Transit 和敲除自定义绑定来完成滑动页面转换。基本上，它会将活动页面 (div) 滑出并滑入一个新页面。它在移动设备（iPad、iPhone、iPod Touch、Android 手机等）上看起来也不错。这是绑定：

Javascript：

    var previousElement = null;
    ko.bindingHandlers.slideVisible = {
        init: function (element, valueAccessor)
        {
            var value = valueAccessor();
            $(element).toggle(ko.utils.unwrapObservable(value));
        },
        update: function (element, valueAccessor)
        {

            var value = ko.utils.unwrapObservable(valueAccessor());
            if (value)
            {
                if (previousElement == null)
                { // initial fade
                    $(element).show();
                }
                else
                {
                    //uses CSS3 Transform for smooth mobile performance
                    $(previousElement).transition({ x: '-100%' }, function () { $(this).hide(); });
                    $(element).css({ x: '100%' });
                    $(element).show().transition({ x: '0%' }, function () 
{ 
//Callback | transition finished code here
});
                }
                previousElement = element;
            }
        }
    };

查看模型片段：

isPageVisible: ko.observable(false)

HTML：

<div data-bind="slideVisible: isPageVisible">
<!-- Page Content Here -->
</div>

JS Fiddle Demo

【讨论】：

【解决方案2】：

根据我的经验，没有“淘汰方式”来处理此类事件。

Knockout 的作者建议对简单的绑定使用 KO event 绑定。但对于更复杂和/或不显眼的事件绑定场景建议使用 jQuery：http://knockoutjs.com/documentation/unobtrusive-event-handling.html

我现在正在使用 Knockout 进行一个项目，我听从了他的建议。使用一些 KO event 绑定（用于表单提交）和一些 jQuery 事件绑定（在我的情况下用于窗口调整大小事件）。

当然，您不需要使用 jQuery，但在您的情况下，走出 KO 库可能是正确的途径。玩得开心！

【讨论】：