Vue.js中setTimeout时间参数短，效果不改写，如何优化？

本文共计1276个文字，预计阅读时间需要6分钟。

首先查看效果图，这是弹窗效果。要求弹窗出现和消失时不是非常突兀，要有过渡效果。首先看弹窗出现的实现思路，先添加一个beforeActive类，再添加一个active类。我们检查元素，一开始是开始。

先看效果图，这是弹窗效果，要求就是弹窗出现和消失时候不是很突兀，要有过渡效果。

首先看弹窗出现的实现思路，先加一个beforeActive类，再加一个active类。我们看审查元素，一开始display：none；

在beforeActive中display：block；只是background: transparent;然后在一定时间后再加上active类。问题就来了，在打开弹窗代码中，如下图，settimeout第二个参数小于60ms效果就会不稳定，有时候有过渡效果，有时候没有过渡效果。

// openbtn(){ // let _this=this; // _this.show =true; // _this.isbeforeActive=true; // setTimeout(function(){ // _this.isactive=true; // },60) // },

想了很久也没明白，后来终于明白，原来是vue渲染是有生命周期的，本来是先渲染befeactive，再渲染active，如果间隔时间太短就一次拿出来渲染了，所以没有效果。