如何在骨干网中进行页面转换？

Question

我想使用骨干来渲染视图？但我希望视图能够在用户身上显示出来。它应该像淡入淡出和缩放的动画一样淡化然后缩放： http://tympanus.net/Development/ModalWindowEffects/

这是我的代码：

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

这会将视图呈现为主div。我希望视图在用户看到时转换（淡入淡出和缩放）。请看上面的链接。我怎么能做到这一点？

Answer 1

我相信，由于视图会动态添加到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;
}