總是使用jquery slideUp slideDown在knockoutjs

Question

我知道如何在knockoutjs中創建自定義綁定，以在可觀察值發生更改時添加jQuery轉換動畫。

我想知道是否有某種方式來附加像slideUp/slideDown這樣的轉換，只要可見性基於可觀察值進行更改。

例如，當使用'with'綁定時，當observable的值變爲null時，DOM元素自動變爲不可見。我希望在發生這種情況時添加一個jQuery轉換。

Answer 1

這可以通過使用自定義綁定來完成。

See this fiddle

HTML

<div> 
    Visible <input type="checkbox" data-bind="checked: visible" /> 
    <div data-bind="slideIn: visible" class="slider"> 
     <h1>I'm visible</h1> 
    </div> 
</div> 

CSS

.slider 
{ 
    border: solid 1px rgb(200, 200, 200); 
    color: rgb(50, 50, 50); 
    background-color: rgb(100,255,100); 
    text-align: center; 
} 

的JavaScript

var VM = function(){ 
    this.visible = ko.observable(true) 
}; 

ko.bindingHandlers.slideIn = { 
    init: function (element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     $(element).toggle(value); 
    }, 
    update: function (element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     value ? $(element).slideDown() : $(element).slideUp(); 
    } 
}; 

ko.applyBindings(new VM()); 

Answer 2

你看看這個：http://knockoutjs.com/examples/animatedTransitions.html？