vue-essential-transitions

A collection of native Vue transition styles for quick prototyping

Transitions

Transition name	Description
v-fade	Transition opacity
v-grow	Scale into view
v-slide	Slide in from right of window
v-slide-left	Slide in from left of window
v-slide-down	Slide in from top of window
v-slide-up	Slide in from bottom of window
v-slide-fade	Slide in from right and transition opacity
v-slide-fade-left	Slide in from left and transition opacity
v-slide-fade-down	Slide down and transition opacity
v-slide-fade-up	Slide up and transition opacity

Install the package from npm by running

$ npm install --save vue-essential-transitions

$ yarn add vue-essential-transitions

Simply import the minified CSS file and reference a transition name in the name attrubute of a element, for example, '.

<template>
    <transition name="v-fade">
      [...]
    </transition>
</template>

<script>
import "vue-essential-transitions";

[...]
</script>

Running example script requires @vue/cli and @vue/cli-service-global to be installed. Install globally by running

$ npm install --save --g @vue/cli @vue/cli-service-global

$ yarn add global vue/cli @vue/cli-service-global