杜兰达尔合成动画答案

【问题标题】：durandal composition animation杜兰达尔合成动画
【发布时间】：2014-03-19 19:53:33
【问题描述】：

有没有什么方法可以将过渡应用于与 durandal 的组合绑定，就像它在 rout 绑定上一样？我的意思是，如果我有

<div data-bind="compose: ActiveView, transition: 'entrance'"></div>

Active 视图是一个 Knockout Observable，当我更改它时，我希望有过渡效果，例如在路由时使用一些进度环指示过渡过程。

这是我的视图模型

import ko = require('knockout');
class Shell implements iModule
{
activate: (context: Object) => void;
ActiveView: KnockoutObservable<any>;
SwitchView: () => void;

constructor() {
    this.activate = this._activateCallback;
    this.ActiveView = ko.observable<string>('parts/welcome');
    this.SwitchView = this._activateView;
}

private _activateView() {
    this.ActiveView('parts/about');
}

private _activateCallback (ctx: Object) {

}
}
export = Shell;

【问题讨论】：

它只是删除旧视图并用新视图替换它，而没有任何动画此过程的能力

标签： animation knockout.js durandal composition

【解决方案1】：

过渡适用于任何组合绑定。不过，您的语法有错误。它应该是这样的：

<div data-bind="compose: { model: ActiveView, transition: 'entrance' }"></div>

【讨论】：