Skip to content

Instantly share code, notes, and snippets.

@Tahul
Last active January 6, 2021 00:01
Show Gist options
  • Save Tahul/532703c3f886da69d5954b283c71bb82 to your computer and use it in GitHub Desktop.
Save Tahul/532703c3f886da69d5954b283c71bb82 to your computer and use it in GitHub Desktop.
[Using Vue transitions with JS] Just a plain component showing how to use Vue <transition> components to animate using JS. #animation, #vue, #transitions
<template>
<transition
:css="false"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
mode="out-in"
>
<slot />
</transition>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
export default defineComponent({
setup() {
/**
* ENTER
*/
const beforeEnter = (el: Element) => {}
const enter = (el: Element, done: () => void) => {
// Don't forget to call done()
}
const afterEnter = (el: Element) => {}
const enterCancelled = (el: Element) => {}
/**
* LEAVE
*/
const beforeLeave = (el: Element) => {}
const leave = (el: Element, done: () => void) => {
// Don't forget to call done()
}
const afterLeave = (el: Element) => {}
const leaveCancelled = (el: Element) => {}
return {
beforeEnter,
enter,
afterEnter,
enterCancelled,
leave,
beforeLeave,
afterLeave,
leaveCancelled,
}
},
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment