使用CSS3绑定Knockout.js动画回调
我正在使用WebApp和CSS3动画为iPad构建一个“Knockout.js”。
不同页面之间的转换是动画化的。当动画结束时，我想得到一个JavaScript回调。
现在，我知道您可以使用这样的Javascript来捕获回调：
element.addEventListener(webkitAnimationEnd, function(){callfunction()},false);但难道没有更好的方法来做到这一点吗？“淘汰赛”？我希望使用DOM中的data-bind属性绑定回调函数，而不是访问javascript代码中的DOM元素！
有什么想法吗？
编辑:也许我应该补充一下，我是Knockout.js新手，我不知道我想做什么，或者更确切地说，我是怎么做的，还是你用常规的方式做！
回答 2
Stack Overflow用户
发布于 2012-04-23 11:55:07
根据我的经验，没有“淘汰赛”的方法来处理这类事件。
淘汰赛的作者建议对简单绑定使用KO 事件绑定。但是对于更复杂和/或不引人注目的事件绑定场景，建议使用jQuery：http://knockoutjs.com/documentation/unobtrusive-event-handling.html
我正在用Knockout做一个项目，我听从了他的建议。使用一些KO 事件绑定(用于表单提交)和一些jQuery事件绑定(在我的示例中用于窗口调整大小事件)。
当然，您不需要使用jQuery，但是在您的情况下，走出KO库可能是正确的路线。玩得开心!
Stack Overflow用户
发布于 2013-03-21 17:36:31
我使用jQuery过境和一个敲除自定义绑定来完成滑动页面转换。基本上，它会将活动页面(div)幻灯片出来，并将一个新页面滑动到其中。它在移动设备上看起来也不错(iPad，iPhone，iPod Touch，安卓手机等等)。以下是绑定：
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演示
https://stackoverflow.com/questions/10279427
复制相似问题
腾讯云开发者
