transitionend-plugin-vue

Introduction

As Vue.js plugin for listening to css transition end events in components. Adds this.$nextTransitionEnd() and this.$onTransitionEnd to Vue Components.

Usage

import Vue from 'vue'
import TransitionEndPlugin from 'transitionend-plugin-vue'
 
Vue.use(TransitionEndPlugin)

export default {
    // Example plugin toggles a value on transition ends
    name: 'ExamplePlugin',
    data () {
        return {
            value: false
        }
    },
    methods: {
        toggle () {
            this.value = !this.value
        },
        waitForNextTransitionEnd () {
            // Run on next transition end, then detach event listener
            this.$nextTransitionEnd(this.toggle)
        }
    },
    mounted () {
        // Run as long as element exists, and specify DOM element
        this.$onTransitionEnd(this.toggle, this.$el.querySelector('#child-node'))
    }
}

Credits

• Johan Schiff / Betahaus

License

The MIT License (MIT).