javascript - 如何在 Backbone 中进行页面转换？

我要使用骨干渲染视图吗？但是我希望该视图以生动的方式呈现给用户。它应先淡入淡出然后缩放，就像此处的“淡入淡出”和“缩放”动画一样：
http://tympanus.net/Development/ModalWindowEffects/

这是我的代码：

if (!this.firstUseOverlayView) {
    this.firstUseOverlayView = new NPWFirstUseView({
        isOverlay: true,
        el: '.first-use-overlay'
    });
}
this.firstUseOverlayView.render();

这会将视图渲染到主div中。我希望视图出现在用户面前时进行过渡（淡入和缩放）。请参阅上面的链接。我该怎么做？

最佳答案

我相信，由于视图是动态添加到DOM的，因此就像在其上放置CSS动画一样容易。

这是一个带有演示的JSFiddle，下面是相关的CSS（为简单起见，没有供应商前缀）。

@keyframes imageFadeIn {
  0%{opacity:0; transform: scale(0.5)}
  100%{opacity:1; transform: scale(1)}
}
.first-use-overlay {
  animation:imageFadeIn 0.3s 1 ease-out;
}