[Vuejs]-Event Driven Transitions in Vue.js

by

1👍

From researching this quite a bit, it seems that it is not possible to trigger transitions manually.

Transitions only seem to work on create/destroy, or with v-show.

To achieve what I want, I have just had to explicitly call the animation library without wrapping the animated element in a transition tag as shown in this codepen example. 

<div id="app">
  <div 
     id="moveMe"
     @click="itemClick">
  </div>
</div>

var app = new Vue({
  el: "#app",
  data: {
    moved: false
  },
  methods: {
    itemClick() {
      let el = this.$el.querySelector('#moveMe')
      if(this.moved) {        
        this.moveLeft(el)
      } else {
        this.moveRight(el)
      }
      this.moved = !this.moved
    },
    moveRight(el) {
      Velocity(el, { 
        left: '200px'
      }, 
      {
        duration: 500
      })  
    },
    moveLeft(el) {
      Velocity(el, { 
        left: '0px'
      },
      {
        duration: 500
      })  
    }
  }
})

I cant validate how effective this solution will be, as I imagine this may leave the DOM and the Virtual DOM out of whack, depending on what you are trying to achieve.

I will leave this question open in case anyone else has a better solution then this.

👤Dalaigh88

Leave a comment