Javascript 在“保持过渡”处于活动状态时继续渲染组件

我有一个组件，其值不断变化。但是，当它被转换隐藏时，它会停止更新值，这不是我想要的行为

签出或删除此代码段：

var demo=新的Vue({
el:'演示'，
数据：{
可见：对，
柜台:0
},
已创建：函数（）{
setInterval（函数（）{
这个.counter++；
}.bind（this），200）；
}
});
。淡入淡出，
.淡出{
不透明度：0；
}
.淡入激活状态，
.淡入淡出激活状态{
过渡：2秒轻松；
}
[v-斗篷]{
显示：无；
}

值：{{counter}}

转换：{{counter}

过渡！
它冻结是因为
v-if
触发了
销毁
事件，因此该组件不存在，无法再绑定

使用
v-show
代替
v-if

为了补充@Sandwell的回答和@Nope的评论

您可以在转换完成后删除该元素



更新：

@HristiyanDodov在@Sandwell和我的建议之上构建了一个完整的解决方案，在进入前使用
>，在离开后使用
>

这是一个完整的解决方案：
您的代码没有执行OP要求的操作
我希望淡入淡出的段落只有在完全隐藏的情况下，当转换完成时，才停止更新值。
-您的代码即使在转换完成且元素隐藏后，也会不断更新值。检查控制台以查看它。数据计数器无法取消绑定，他必须创建一个新的var，并在触发点击转换按钮时进行更新。解决方案应更新计数器，直到元素隐藏，然后停止更新。不管怎样，您的解决方案都不能做到这一点。我也不确定如果一个隐藏的元素被无限期地更新，它是否对内存有好处。@不，没有冒犯的意思！很抱歉。在阅读了这篇文章之后，我同意stackoverflow上的人们最关心的是是否正确。声音的语调似乎很冷sometimes@JacobGoh情感很难在屏幕上以死板的文字表达出来。最好把重点放在事实和逻辑上，然后用可能的“语气”旁敲侧击。有类似编程问题的未来用户不在乎“戏剧性”，他们想要的是有效的解决方案。编辑：另外，那篇博文虽然有点道理，但在我个人看来，它有点过火了。虽然转换按钮似乎没有再次添加元素，但现在这是在处理OPs请求。已更改为upvote。如果在转换完成之前单击按钮，该选项将中断。只需快速连续敲击按钮几次，然后查看。好主意，但那个更新不起作用。如果只单击一次按钮，它将淡出，但
存在
保持
真实
。签出-我已通过进入前的
和离开后的
事件解决了此问题。当您快速单击按钮时，它也能正常工作。把我的小提琴放在答案里，我会接受的。@HristiyanDodov我想你可以自己回答。因为这不是我的答案。谢谢，多亏了你，我才找到了解决办法，所以我认为你值得表扬。
<p v-show="visible" v-if="exists" @transitionend="handleTransitionend">

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