A lightweight CSS library for for adding transitions to Vue components ⭐

Demo | Contribution | Changelog

Installation via NPM:

npm install vue-transitions-css

In the main.js file:

...

import 'vue-transitions-css';

...

This imports the minified css distribution file globally, available for use anywhere in the project.

In any .vue file:

  <transition name="fade">
    <Content v-if="show" />
  </transition>

Be sure to set the mode of the transition so it doesn't appear janky:

  <transition name="fade" mode="out-in">
    <Content v-if="show" />
  </transition>

In some cases, the animations would work during development, but not when you build and deploy to production. This issue is most likely with purgeCSS or any other optimization tool. especially if you use Nuxt.js and TailwindCSS module.

To fix the issue: In your purgeCSS config, you have to whitelist every animation class you use in your app. If you use the fade-x animation for example, add a regexe pattern for purgeCSS to ignore any css class that will include fade-x in it's name.

in nuxt.config.js:

export default {
   purgeCSS: {
    whitelistPatterns: [/fade-x/]
  }
}

Thanks goes to these wonderful people (emoji key):

jonathan 💻 🚧

Simeon Udoh 💻 🎨

This project follows the all-contributors specification. Contributions of any kind welcome!