CODEWITHSUNDEEP
javascriptjqueryknockout.jsknockout-2.0
NVM
NVM

Reputation: 5552

Always use jquery slideUp slideDown in knockoutjs

I know how to create custom bindings in knockoutjs to add jquery transition animations when an observable value changes.

I am wondering if there is some way of attaching a transition like slideUp/slideDown whenever visibility changes based on an observable value.

for example when using the 'with' binding, when the value of the observable becomes null, the DOM element automatically becomes invisible. I would like to add a jquery transition whenever this happens.

Upvotes: 3

Views: 3325

Answers (2)

Jacques Snyman
Jacques Snyman

Reputation: 4300

This can be accomplished by using a custom binding.

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());

Upvotes: 13

pax162
pax162

Reputation: 4735

Did you have a look at this: http://knockoutjs.com/examples/animatedTransitions.html ?

Upvotes: 1

Related Questions