0.1.7 • Published 5 years ago
vue-essential-transitions v0.1.7
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 |
Installation
Install the package from npm by running
$ npm install --save vue-essential-transitionsor
$ yarn add vue-essential-transitionsUsage
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>Dev
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-globalor
$ yarn add global vue/cli @vue/cli-service-global