Vue Javascript Transition не работает при вызове done ()

Question

Я пытаюсь создать переход, который рассеивает элементы Vue, и пытался следовать Документации Vue, вызывая функцию done () в конце кода ловушки перехода -after. Хотите знать, как правильно использовать done ()?

leave: function(el, done) {
      el.style.transition = "all 2s ease-out";
      el.style.top = Math.random() * 15 * (Math.random() > 0.5 ? 1 : -1) + "em";
      el.style.left =
        Math.random() * 15 * (Math.random() > 0.5 ? 1 : -1) + "em";
      el.style.opacity = 0;
      done()
}

При использовании функции done () переход не происходит. Но без функции done () переход работает, как и ожидалось.

Answer 1

Ваша проблема связана с тем, что вы пытаетесь использовать один тип перехода при попытке использовать инструменты для другого.

Vue имеет несколько типов перехода;тот, который вы пытаетесь использовать, является программным - привязка методов enter или leave (или обоих) позволяет программно изменять аспекты элемента, не ограничиваясь CSS.Для этого, однако, требуется, чтобы Vue знал, когда вы закончите, поэтому существует обратный вызов done.

Если вы хотите посмотреть, как ваш пример будет выглядеть с этим, этот фрагмент должен проиллюстрировать это:

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>

В тот момент, когда вы звоните done, Вью рассматривает ваш переход и переходы.Вовсе не вызывая его, Vue выводит из CSS-свойства transition вашего элемента, что это переход 2s.Вот почему пропуск done работает.