[Using Vue transitions with JS] Just a plain component showing how to use Vue <transition> components to animate using JS. #animation, #vue, #transitions

Vue transitions with JS.vue

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