Question

使用knockout更改模板时，有没有办法在“页面”更改之间设置过渡动画？我正在寻找类似于Knockback-Navigators的东西。我找不到办法做到这一点？有没有我可以使用的包来使这更容易？这是一个JSFiddle，它与我的项目使用的绑定类型相同。以及我的javascript示例：

var View = function (title, templateName, data) {
var self = this;
this.title = title;
this.templateName = templateName;
this.data = data;
this.url = ko.observable('#' + templateName);
};
var test1View = {
    test: ko.observable("TEST1")
};
var test2View = {
    test: ko.observable("TEST2")
};

var viewModel = {
views: ko.observableArray([
    new View("Test 1", "test1", test1View),
    new View("Test 2", "test2", test2View)]),
    selectedView: ko.observable(),
}
//Apply knockout bindings
ko.applyBindings(viewModel);

//Set up sammy url routes
Sammy(function () {
    //Handles only groups basically
    this.get('#:view', function () {
        var viewName = this.params.view;
        var tempViewObj = ko.utils.arrayFirst(viewModel.views(), function (item) {
            return item.templateName === viewName;

        });
        //set selectedView
        viewModel.selectedView(tempViewObj);
    });
}).run('#test1');

Answer 1

有很多方法可以做到这一点，这里有一个

ko.bindingHandlers.withFade = {    
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var $element = $(element);
        var observable = valueAccessor();
        var wrapper = ko.observable(observable());

        observable.subscribe(function(value) {
            var current = wrapper();
            fadeIn = function() {
                wrapper(value);
                $element.fadeIn();
            };

            if(current) {
                $element.fadeOut(fadeIn);
            } else {
                $element.hide();
                fadeIn();
            }
        });

        ko.applyBindingsToNode(element, { with: wrapper }, bindingContext);

        return { controlsDescendantBindings: true };
    }
};

http://jsfiddle.net/7E84t/19/

您可以像这样抽象效果

ko.transitions = {
    fade: {
        out: function(element, callback) {
            element.fadeOut(callback);
        },
        in: function(element) {
            element.fadeIn();
        }
    },
    slide: {
        out: function(element, callback) {
            element.slideUp(callback);
        },
        in: function(element) {
            element.slideDown();
        }
    }
};

HTML

<div data-bind="withFade: { data: selectedView, transition: ko.transitions.slide }">

http://jsfiddle.net/7E84t/23/

动画淘汰模板视图

1 个答案: