FadeInOut.vue

<template>
  <Transition
    name="fade-translate"
    mode="out-in"
    :css="false"
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
  >
    <slot />
  </Transition>
</template>

<script>
import gsap from 'gsap'

export default {
  name: 'FadeInOut',
  props: {
    fadeInTime: { type: Number, default: 0.5 },
    fadeOutTime: { type: Number, default: 0.35 },
    fadeOutDelay: { type: Number, default: 0 }
  },
  data() {
    return {
      height: null
    }
  },
  methods: {
    beforeEnter(element) {
      gsap.set(element, {
        opacity: 0
      })
    },
    enter(element, done) {
      gsap.to(element, {
        duration: this.fadeInTime,
        opacity: 1,
        ease: 'expo',
        onComplete: done
      })
    },
    leave(el, done) {
      gsap.to(el, {
        duration: this.fadeInTime,
        ease: 'expo',
        delay: this.fadeOutDelay,
        opacity: 0,
        onComplete: done
      })
    }
  }
}
</script>

<style lang="scss"></style>