vue-transitions-css

KO | EN

gitlite — search

#javascript #css #golang #html #react #python3 #machine-learning #go #python #template #typescript #nodejs

vue-transitions-css

★ 41 Open GitHub ↗

A lightweight CSS library for adding transitions to Vue 2 components :sparkles: :green_heart:

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# vue-transitions-css

[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](https://raw.githubusercontent.com/Edmund1645/vue-transitions-css/master/)

A lightweight CSS library for for adding transitions to Vue components :star:

[Demo](https://vue-transitions-css.netlify.app/) | [Contribution](./CONTRIBUTION.md) | [Changelog](./CHANGELOG.md)

## USAGE
Installation via NPM:
```bash
npm install vue-transitions-css
```
In the `main.js` file:
```js
...

import 'vue-transitions-css';

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

In any `.vue` file:
```html
 <transition name="fade">
 <Content v-if="show" />
 </transition>
```
Be sure to set the [mode](https://vuejs.org/v2/guide/transitions.html#Transition-Modes) of the transition so it doesn't appear janky:
```html
 <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`:

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

```

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<table>
 <tr>
 <td align="center"><a href="https://github.com/bemijonathan"><img src="https://avatars3.githubusercontent.com/u/34762800?v=4" width="100px;" alt=""/> jonathan</a> <a href="https://github.com/Edmund1645/vue-transitions-css/commits?author=bemijonathan" title="Code">💻</a> <a href="#maintenance-bemijonathan" title="Maintenance">🚧</a></td>
 <td align="center"><a href="https://simicode.me"><img src="https://avatars1.githubusercontent.com/u/25581792?v=4" width="100px;" alt=""/> Simeon Udoh</a> <a href="https://github.com/Edmund1645/vue-transitions-css/commits?author=simeon4real" title="Code">💻</a> <a href="#design-simeon4real" title="Design">🎨</a></td>
 </tr>
</table>

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

vue-transitions-css

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README