Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <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>
Add Comment
Please, Sign In to add comment