How do I do a page transition in backbone?

Question

I want to use backbone to render a view? But I want the view to animately appear to the user. It should fade then scale just like the animation for Fade and Scale here: http://tympanus.net/Development/ModalWindowEffects/

Here's my code:

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

This renders the view into the main div. I want the view to transition (fade and scale) when it appears to the user. Please see link above. How can I accomplish this?

Answer 1

I believe that since the view gets added to the DOM dynamically, it's as easy as putting a CSS animation on it.

Here's a JSFiddle with a demo, and the relevant CSS is below (without vendor prefixes, for simplicity).

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