使用Knockout.js綁定CSS3動畫回調

我使用Knockout.js和CSS3動畫爲iPad構建「WebApp」。使用Knockout.js綁定CSS3動畫回調

不同頁面之間的轉換是動畫效果。我想在動畫結束時獲得JavaScript回調。

現在我知道你能趕上使用JavaScript這樣的回調：

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

但是是不是有更好的辦法來做到這一點？「淘汰賽的方式」？我想使用DOM中的data-bind屬性綁定回調函數，而不是訪問我的javascript代碼中的DOM元素！

任何想法？

編輯：也許我應該補充一點，我是新來的Knockout.js，我不知道如果我想要做或者說，我是如何試圖做到這一點是有道理的，或者你只是以傳統的方式去做！

來源

2012-04-23 Lixus

從我的經驗來看，沒有「淘汰賽的方式」來處理這類事件。

Knockout的作者建議使用KO 事件綁定進行簡單綁定。但是對於更復雜和/或不顯眼的事件綁定場景，建議使用jQuery：http://knockoutjs.com/documentation/unobtrusive-event-handling.html

我正在使用Knockout進行一個項目，我遵循了他的建議。使用一些KO 事件綁定（用於表單提交）和一些jQuery事件綁定（在我的情況下用於窗口大小調整事件）。

當然，你不需要使用jQuery，但在你的情況下走出KO庫可能是正確的路線。玩的開心！

來源

2012-04-23 11:55:07

我使用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

來源

2013-03-21 17:36:31 ROFLwTIME

使用Knockout.js綁定CSS3動畫回調

回答

相關問題