[Vuejs]-Vue Javascript Transition not working when calling done()

by

0👍

Your issue stems from the fact that you are trying to use one type of transition while trying to use the tools for another.

Vue has multiple transition types; the one you’re trying to use is programmatic – binding an enter or leave (or both) methods allow you to programmatically change aspects of an element without being limited by CSS. This, however, requires Vue to know when you’re done, which is why the done callback exists.

If you’d like to see how your example would look with this, this snippet should illustrate it:

new Vue({
  el: '#example-4',
  data: {
    show: false
  },
  methods: {
    beforeEnter: function(el) {
      el.style.opacity = 0
    },
    enter: function(el) {
      el.style.top = 0;
      el.style.left = 0;
      el.style.opacity = 1;
    },
    leave: function(el, done) {
      el.style.transition = "all 2s ease-out";
      el.style.top = Math.random() * 150 * (Math.random() > 0.5 ? 1 : -1) + "em";
      el.style.left = Math.random() * 150 * (Math.random() > 0.5 ? 1 : -1) + "em";
      el.style.opacity = 0;
      setTimeout(function() {
        done();
      }, 2000);
    }
  }
})
#example-4 {
  position: relative;
  top: 0;
  left: 0;
}

#example-4 p {
  position: absolute;
  top: 0;
  left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="example-4">
  <button @click="show = !show">
    Toggle
  </button>
  <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" v-bind:css="false">
    <p v-if="show">
      Demo
    </p>
  </transition>
</div>

The moment you call done, Vue considers your transition over and transitions. Without calling it at all, Vue infers from the transition CSS property on your element that it is a 2s transition. This is why omitting done works.

Leave a comment