A collection of native Vue transition styles for quick prototyping
| 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
or
$ 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
or
$ yarn add global vue/cli @vue/cli-service-global
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent