单击时为重用视图设置动画

Question

我重用了一个视图并提供了一个点击事件，因此用户认为他们正在更改页面。这非常适合我的需要，但因为视图具有所有相同的文本、图像，用户会认为没有任何改变，因此没有进行选择。当用户点击图片时，我如何为 UI 设置动画？

private onCurrentLookSelected(args: CurrentLookSelectedEvent) {
    this.hasCurrent(true);
    ko.utils.arrayForEach(this._formulas(), (formula: FormulaValues) => {
       formula.startingLevel(args.currentValue.startingLevel());
       formula.startingTone(args.currentValue.startingTone());
    });
    window.scrollTo(0, 0);
}

Answer 1

如果您在 Durandal 这样做，我建议您将路由器设置为每个 "page":

router.map([{ 
    title: 'Page 1', 
    route: 'first',
    moduleId: 'viewmodels/reusable' 
},{ 
    title: 'Page 2', 
    route: 'second',
    moduleId: 'viewmodels/reusable' 
}])

然后使用内置的动画插件：

app.setRoot('viewmodels/shell', 'entrance');

单击时为重用视图设置动画

Animate a reused view on click

jquery

dom

durandal

knockout-3.0