Continue to render component while leave transition is active

Question

I have a component with a value that constantly changes. However, when it’s hidden with a transition, it stops updating the value, which is not the behavior I want.

Check out this fiddle or this snippet:

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>

As you can see, when you click the button, the fading paragraph freezes at the current counter value, while the other one continues to update. How do I avoid that? I want the fading paragraph to stop updating the value only when it’s completely hidden, when the transition has finished.

Answer 1

to complement @Sandwell's answer and @Nope's comment,

You can remove the element after the transition is completed.

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

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

and

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

---

UPDATE:

@HristiyanDodov built a complete solution on top of @Sandwell's and my suggestions, by making use of transition hook @before-enter and @after-leave.

This is the complete solution: http://jsfiddle.net/hdodov/5vu7wgj8/6/

Answer 2

It freezes because v-if triggers the destroy event so the component does not exist and it can not be binded anymore.

Use v-show instead of v-if

Proof of Concept