Skip to content
This repository has been archived by the owner on Aug 26, 2024. It is now read-only.

A lightweight CSS library for adding transitions to Vue 2 components ✨ πŸ’š

License

Notifications You must be signed in to change notification settings

Edmund1645/vue-transitions-css

Folders and files

NameName
Last commit message
Last commit date
Jul 20, 2020
May 27, 2020
May 27, 2020
Jul 26, 2020
May 19, 2020
May 27, 2020
May 25, 2020
May 27, 2020
May 27, 2020
May 19, 2020
Jul 26, 2020
May 24, 2020
Jul 20, 2020
May 27, 2020

Repository files navigation

vue-transitions-css

All Contributors

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

Demo | Contribution | Changelog

USAGE

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>

purgeCSS fix

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/]
  }
}

Contributors ✨

Thanks goes to these wonderful people (emoji key):


jonathan

πŸ’» 🚧

Simeon Udoh

πŸ’» 🎨

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