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

Question

我想使用 backbone 来渲染 View ？但我希望 View 能够生动地呈现给用户。它应该淡入淡出然后缩放，就像这里的淡入淡出和缩放动画一样: http://tympanus.net/Development/ModalWindowEffects/

这是我的代码:

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

这会将 View 渲染到主 div 中。我希望 View 在显示给用户时进行转换(淡入淡出和缩放)。请参阅上面的链接。我怎样才能做到这一点？

Answer 1

我相信，由于 View 是动态添加到 DOM 中的，所以就像在其上放置 CSS 动画一样简单。

这是一个 JSFiddle带有演示，相关的 CSS 如下(为简单起见，没有 vendor 前缀)。

@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;
}