vue3-transitions
v1.0.0
Published
Reusable Vue 3 transition components
Downloads
767
Maintainers
Readme
DEMO
Install
npm i vue3-transitions
or
yarn add vue3-transitions
Usage
Demo code can be found under the docs section here.
Import globally
import { createApp } from 'vue'
import App from './App.vue'
import Vue3Transitions from 'vue3-transitions'
const app = createApp(App)
app.use(Vue3Transitions)
app.mount('#app')
Router view
Vue recommends using a transition mode
- more info here
<template>
<router-view v-slot="{ Component }">
<FadeInOut entry="left" exit="left" :duration="500" mode="out-in">
<component :is="Component" />
</FadeInOut>
</router-view>
</template>
<script>
import { defineComponent } from 'vue'
import { FadeInOut } from 'vue3-transitions'
export default defineComponent({
components: { FadeInOut }
})
</script>
As a component
<template>
<button @click="triggerFade = !triggerFade" >
Trigger animation
</button>
<FadeInOut entry="left" exit="left" :duration="500">
<h1 v-if="triggerFade">Fade in and out transition</h1>
</FadeInOut>
</template>
<script>
import { defineComponent, ref } from 'vue'
import { FadeInOut } from 'vue3-transitions'
export default defineComponent({
components: { FadeInOut },
setup() {
const triggerFade = ref(false)
return {
triggerFade
}
}
})
</script>
Tree Shaking
Import components from the esm
folder to enable tree shaking.
<script>
import { defineComponent } from 'vue'
import { FadeInOut } from 'vue3-transitions/esm'
export default defineComponent({
components: { FadeInOut }
})
</script>
Available components
- FadeInOut - Single, Group
- SlideInOut - Single, Group
- ZoomInOut (coming soon)
- RollInOut (coming soon)
...plus more coming soon