vue-animated

transition component for Animate.css.

Installation

Download the project using your favorite package manager:

npm install @codekraft-studio/vue-animated
yarn add @codekraft-studio/vue-animated

Then load it in your project:

import VueAnimated from '@codekraft-studio/vue-animated'

Vue.use(VueAnimated)
Js

Than use it in your application as you would with transitions:

<AnimatedTransition>
  <div v-if="show" class="box"></div>
</AnimatedTransition>
HTML

Or customize it as you want, it will adapt the css animation to your settings

<AnimatedTransition enter="slideInDown" leave="slideInDown" duration="5000">
  <!-- Normal transition content -->
</AnimatedTransition>
HTML

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Run your unit tests

npm run test:unit

GitHub

Functional animation components using Animate.cssRead More

Latest commit to the master branch on 4-29-2023
Download as zip