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

Bind CSS3 Animation Callback using Knockout.js

本文关键字：动画 回调 CSS3 绑定 Knockout js 使用      更新时间：2023-09-26

我正在使用Knockout.js和CSS3 Animations为iPad构建一个"WebApp"。

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

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

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

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

有什么想法吗？

编辑：也许我应该补充一点，我是Knockout的新手.js我不知道我是否想做什么，或者更确切地说，我试图如何做到这一点是有意义的，或者你只是以传统的方式做！

我使用 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小提琴演示

根据我的经验，没有"淘汰赛方式"来处理这类事件。

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

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

当然，你不需要使用 jQuery，但在你的情况下，走出 KO 库可能是正确的路线。玩得愉快！

相关文章：