我使用的是“用”结合,我想调用的变化值之前一些动画,在那之后。 是否有任何身体知道该怎么办呢?
Answer 1:
你总是可以用你自己的绑定,以便用jQuery进行,像这样一些动画结合包裹:
ko.bindingHandlers['fadingWith'] = {
init: function(element, valueAccessor, allBindingsAccessor, context) {
return ko.bindingHandlers['with']['init'](element, valueAccessor, allBindingsAccessor, context);
},
update: function(element, valueAccessor, allBindingsAccessor, context) {
$(element).fadeOut(100, function () {
ko.bindingHandlers['with']['update'](element, valueAccessor, allBindingsAccessor, context)
}).fadeIn(100);
}
};
ko.virtualElements.allowedBindings['fadingWith'] = true;
然后,你可以应用它,像这样: <div data-bind="fadingWith: someObservable"><span data-bind="text: $data"></span></div>
我没有测试过这一点(我将在以后尝试一下),但我认为这将是前进的方向。
另一种选择(这我更加肯定会工作)是您创建一个单独的绑定,执行以下操作:
ko.bindingHandlers['fadeOn'] = {
update: function(element) {
$(element).hide().fadeIn(200);
}
}
这不给你的动画可观察到的变化之前,但它会事后给你的动画。 所以,你会做<div data-bind="with: someObservable, fadeOn: someObservable"><span data-bind="text: $data"></span></div>
编辑:我刚才想出了另一种可能是更容易的选择是使用您所使用的可变节流扩展with
使用:
视图模型:
///...your code....
this.observableThatNeedsWith = ko.observable("Hello");
this.delayedObservable = ko.computed(this.observableThatNeedsWith).extend({throttle: 200});
//...continue your code
然后,你有一个绑定,如下所示:
ko.bindingHandlers['fadeInOut'] = {
update: function(element) {
$(element).stop(true, true).stop(true, true).fadeOut(200).fadeIn(200);
}
}
请注意,淡出时间是一样的油门的时间。
然后,你把它绑定像这样: <div data-bind="with: delayedObservable, fadeInOut: observableThatNeedsWith"><span data-bind="text: $data"></span></div>
会发生什么事是,当你改变observableThatNeedsWith,该fadeInOut处理程序将开始转换的元素。 然后,在那一刻,它得到(在本例中为200ms)来完成淡出油门将赶上和fadeInOut开始衰落元素早在delayedObservable将正确的更新。它淡出一两件事,而在另一个变淡。
Answer 2:
我通过创建绑定创建元素的副本,解决问题。 克隆后,该元素我制作动画,之后我删除它,并用新值动画原单元素。 设置之前,这个结合是非常重要的
Answer 3:
洛杉矶菜豆第三解决方案是行不通的,因为它会节流“与”结合总是发生动画后。
因为我们正试图通过动画的结合与呈现的元素,从非再生的状态要呈现的状态时,动画将尝试动画不存在的元素。
斯瓦沃米尔的回答是我见过的最好的,但在移动设备上的动画时,克隆复杂的元素是不是因为性能原因的选项。 正确贯彻这些绑定动画需要改进淘汰赛框架。
编辑:我已经意识到,它可能以动画一个“与”或者“如果”用一个“模板”或等效的逻辑“的foreach”标签替换它具有约束力。 举例来说,我代替:
<div data-bind="with: selectedTimelapse">
有:
<div data-bind="template: {
foreach: selectedTimelapse,
afterAdd: utils.kbAnimFadeIn,
beforeRemove: utils.kbAnimFadeOut
}">
有没有必要从我的例子“selectedTimelapse”是一个列表。 使用此当selectedTimelapse设为我现在可以转型和我的模态对话框。 这种技术可以对黑客攻击的,如果转换以及工作:
<div data-bind="template: {
foreach: (showTimelapse()) ? selectedTimelapse : undefined,
afterAdd: utils.kbAnimFadeIn,
beforeRemove: utils.kbAnimFadeOut
}">
我utils.kbAnimFadeIn /输出功能相当于在淘汰赛动画示例页面展示了这里的功能: http://knockoutjs.com/examples/animatedTransitions.html