transitionend-plugin-vue
v1.0.0
Published
Methods for listening to css transition end events in Vue components
Downloads
1
Readme
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
License
The MIT License (MIT).