vue-transition-collection

Easy to use transitions for your vue project.

Demo

Demo

Typedoc

Typedoc

Usage

npm i vue-transition-collection animate.css

import VueTransitionCollection from "vue-transition-collection"
import "animate.css/animate.min.css";

Vue.use(VueTransitionCollection)

<vtc-fade mode="out-in" direction="right" duration="1000" delay="0">
  <div :key="someKey">some content</div>
</vtc-fade>

Available transitions

• vtc-fade
• vtc-zoom
• vtc-bounce
• vtc-flip
• vtc-fade-big
• vtc-rotate
• vtc-slide

Available props

• group: boolean - Use <transition-group> instead of <transition>
• mode: "in-out"|"out-in" - The transition mode
• direction: "right"|"left"|"up"|"down"|"toggle" - The direction of the transition
• inverse: boolean - Switch left/right and up/down
• delay: number - The delay until the transition starts
• duration: number - The duration of the transition