Продолжить рендеринг компонента, пока активен переход - PullRequest
0 голосов
/ 02 мая 2018

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

Проверьте эту скрипку или этот фрагмент:

var demo = new Vue({
  el: '#demo',
  data: {
    visible: true,
    counter: 0
  },
  created: function() {
    setInterval(function() {
      this.counter++;
    }.bind(this), 200);
  }
});
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: 2s ease;
}

[v-cloak] {
  display: none;
}
<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="demo" v-cloak>
  <p>Value: {{ counter }}</p>

  <transition name="fade">
    <p v-if="visible">Transition: {{ counter }}</p>
  </transition>

  <button @click="visible = !visible">
    Transition!
  </button>
</div>

Как вы можете видеть, когда вы нажимаете кнопку, исчезающий абзац останавливается на текущем значении счетчика, а другой продолжает обновляться. Как этого избежать? Я хочу, чтобы исчезающий абзац прекратил обновлять значение только тогда, когда оно полностью скрыто, когда переход завершен.

Ответы [ 2 ]

0 голосов
/ 02 мая 2018

в дополнение к ответу @ Sandwell и комментарию @ Nope,

Вы можете удалить элемент после завершения перехода.

http://jsfiddle.net/jacobgoh101/5vu7wgj8/4/

<p v-show="visible" v-if="exists" @transitionend="handleTransitionend">

и

new Vue({
    data: {
        // ...
        exists: true
    },
    methods: {
        handleTransitionend() {
            this.exists = false;
      }
    }
});

UPDATE:

@ HristiyanDodov построил полное решение на основе @ Sandwell's и моих предложений, используя переходный крюк @before-enter и @after-leave.

Это полное решение: http://jsfiddle.net/hdodov/5vu7wgj8/6/

0 голосов
/ 02 мая 2018

Он останавливается, потому что v-if вызывает событие destroy, поэтому компонент не существует и его нельзя больше связывать.

Используйте v-show вместо v-if

Подтверждение концепции

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...