vue-transitions-css

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

vue-transitions-css

(★ 41)

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

vue-transitions-css Latest Version Download

Download Latest Version (.zip)

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

vue-transitions-css Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

vue-transitions-css

vue-transitions-css Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README