animating-modal-modal.vue

<template>
  <transition
    v-bind:css="false"
    v-on:enter="enter"
    v-on:leave="leave"
    appear
  >
    <div class="modal">
      <div class="inner">
        <button class="close-button" @click="handleClose"><close-icon/></button>
        <slot></slot>
      </div>
    </div>
  </transition>
</template>

<script>
import {TweenMax, Power4} from 'gsap'
import CloseIcon from '@/components/icons/Close.vue'
export default {
  name: 'modal',
  components: {
    CloseIcon
  },
  methods: {
    enter (el, done) {
      TweenMax.fromTo(el, 0.5, {
        alpha: 0
      }, {
        alpha: 1,
        ease: Power4.easeOut
      })
    },
    leave (el, done) {
      TweenMax.to(el, 0.5, {
        alpha: 0,
        ease: Power4.easeOut,
        onComplete: done
      })
    },
    handleClose () {
      this.$router.go(-1)
    }
  }
}
</script>