Vue.js中setTimeout时间参数过短导致效果异常，如何解决？

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

查看效果图，这是弹窗效果。要实现弹窗出现和消失时的平滑过渡效果，首先考虑以下思路：

1. 检查弹窗元素，一开始是隐藏的。

2.加一个 `beforeActive` 类，当弹窗准备显示时添加。

3.再加一个 `active` 类，实际触发弹窗显示时添加。

具体实现步骤如下：

1. 确定弹窗元素并检查其初始状态。

2.当触发弹窗显示时，先给弹窗添加 `beforeActive` 类。

3.通过 CSS 过渡效果，实现弹窗从隐藏到显示的平滑过渡。

4.当弹窗消失时，先移除 `active` 类，再通过 CSS 过渡实现隐藏效果。

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

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

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