animated-outlet.md

animated-outlet component

Enable animation on web component swapping triggered by route transitions.

Usage

1. Register a AnimatedOutlet web component to the tag to be used as router outlet. wc middleware uses 'router-outlet' tag as default, but any tag can be used.

import { AnimatedOutlet } from 'slick-router/components/animated-outlet'

customElements.define('router-outlet', AnimatedOutlet)

2. Add an 'animation' attribute to the outlet that will be animated

<router-outlet animation></router-outlet>

3. Write the animation using CSS transition or animation

.outlet-enter-active,
.outlet-leave-active {
  transition: opacity 0.5s;
}

.outlet-enter, .outlet-leave-to {
  opacity: 0;
}

The above example adds a fading effect to the element that is entering and the one which is leaving

The API is based on Vue one and most of the Vue animations can be converted with little changes

Is possible to configure the CSS classes prefix through animation attribute, allowing to create more than one animation in same app:

<router-outlet animation="bounce"></router-outlet>

.bounce-enter {
  opacity: 0;
}

.bounce-enter-active {
  animation: bounce-in 0.5s;
}

.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

The example above uses classes prefixed with 'bounce-' instead of 'outlet-'

Live Demo

Customization

Is possible to customize how animation is done by creating and registering animation hook classes. It must extend from AnimationHook:

import { AnimationHook } from 'slick-router/components/animated-outlet.js'

class MyAnimation extends AnimationHook {  
  beforeEnter (outlet, el) {
    // prepare element before is connected
  }

  enter (outlet, el) {
    // run enter animation
  }

  leave (outlet, el, done) {
    // run leave animation and call done on finish
    done()
  }
}

The hook class can be registered as default with setDefaultAnimation or to predefined animations using registerAnimation

Out of box, is provided the AnimateCSS class that allows to use animate.css

import {
  AnimatedOutlet,
  AnimateCSS,
  setDefaultAnimation,
  registerAnimation
} from 'slick-router/components/animated-outlet.js'

setDefaultAnimation(AnimateCSS, { enter: 'fadeIn', leave: 'fadeOut' })

registerAnimation('funky', AnimateCSS, { enter: 'rotateInDownRight', leave: 'hinge' })

<router-outlet animation></router-outlet> <!-- the default animate.css fade -->

<router-outlet animation enter="zoomIn" leave="zoomOut"></router-outlet> <!-- override animation using enter and leave attrs -->

<router-outlet animation="funky"></router-outlet> <!-- use the predefined funky animation -->

Live demo

It's possible to use JS animation libraries like GSAP or even as standalone component (without routing envolved)