Skip to content

Instantly share code, notes, and snippets.

@cprass

cprass/Fade.vue

Created October 9, 2016 09:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cprass/f43c87130d4e76db543c71addd23deb0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cprass/f43c87130d4e76db543c71addd23deb0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. cprass created this gist Oct 9, 2016.
    57 changes: 57 additions & 0 deletions Fade.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,57 @@
    <template>
    <transition
    name="fade"
    mode="out-in"
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:before-leave="beforeLeave"
    v-on:leave="leave"
    >
    <slot></slot>
    </transition>
    </template>
    <script>
    import Velocity from 'velocity-animate'
    export default {
    props: {
    duration: {
    default: false
    }
    },
    methods: {
    beforeEnter (el) {
    el.style.opacity = 0
    },
    enter (el, done) {
    var vm = this
    Velocity(el,
    { opacity: 1 },
    {
    duration: vm.duration ? vm.duration : 500,
    easing: [ 0.39, 0.67, 0.04, 0.98 ],
    complete: function () {
    done()
    }
    }
    )
    },
    beforeLeave (el) {
    el.style.opacity = 1
    },
    leave (el, done) {
    var vm = this
    Velocity(el,
    { opacity: 0 },
    {
    duration: vm.duration ? vm.duration : 500,
    easing: [ 0.39, 0.67, 0.04, 0.98 ],
    complete: function () {
    done()
    }
    }
    )
    }
    }
    }
    </script>