Vue中mounted钩子调用$nextTick实现样式过渡未按预期生效问题

问题根源 #

Vue的$nextTick的触发时机是在Vue内部的DOM更新队列全部执行完毕后，但此时浏览器还没有完成当前帧的重绘/重排操作。你两次修改styles的操作会被合并到浏览器的同一个渲染帧中处理，浏览器最终只会应用最后一次的样式值，因此看不到过渡效果。
而setTimeout属于宏任务，其回调会被推迟到当前渲染帧的所有操作（包括样式计算、绘制）都完成后才执行，两次样式变更被拆分到两个不同的渲染帧，因此可以正常触发过渡。

不依赖setTimeout的实现方案 #

核心思路是在设置初始样式后，主动触发浏览器的强制同步布局，让浏览器先应用初始样式，再修改为目标样式。具体实现步骤：

1. 给需要添加过渡的元素绑定ref属性，方便获取DOM实例：

<div :style="styles" ref="transitionEl"></div>

2. 修改mounted中的逻辑：

mounted() {
  // 设置过渡初始状态
  this.styles = {
    backgroundColor: 'silver',
    transition: 'background-color 1s ease' // 需提前声明对应的过渡属性
  };
  // 主动读取DOM布局属性，强制浏览器计算并应用当前样式
  // 读取任意布局相关属性都可生效，比如offsetHeight、getBoundingClientRect等
  void this.$refs.transitionEl.offsetWidth;
  // 直接修改为目标样式即可触发过渡
  this.styles = {
    backgroundColor: 'gold',
    transition: 'background-color 1s ease'
  };
}

该方案是浏览器原生支持的标准能力，兼容性好，不会出现setTimeout延迟不稳定的问题。

内容的提问来源于stack exchange，提问作者vch