Vue.js过渡动画异常：为何需offsetHeight实现slideToggle效果？

嘿，这个问题我之前折腾过渡动画时也碰到过！其实背后是浏览器的渲染队列机制在搞鬼。

当你在同步代码里连续修改元素样式（比如先把height设为0px，紧接着又改成目标高度），浏览器会把这些样式变更塞进一个队列里，等同步代码全跑完才会一次性计算布局（也就是重排）并渲染。这就导致浏览器直接看到最终的height值，完全跳过了中间的0px状态——而过渡动画需要两个明确的、先后存在的样式状态才能生效，自然就直接瞬间显示/隐藏了。

那el.offsetHeight为啥能解决问题？因为它是一个强制触发重排的属性：当你读取它的时候，浏览器必须立刻计算当前元素的布局信息（包括高度），这就逼着浏览器把之前的样式变更（比如height:0px）立即应用并完成重排。等你接下来设置目标高度时，浏览器能清晰看到两个不同的状态，过渡动画也就正常跑起来了。

既然核心是让浏览器先处理完初始样式的重排，再应用目标样式，我们有几种更优雅的替代方式：

方案1：用requestAnimationFrame蹭浏览器帧渲染 #

利用浏览器的帧循环，把设置目标高度的代码放到下一帧执行，给浏览器足够时间处理初始样式：

enter: function(el) {
  requestAnimationFrame(() => {
    el.style.height = this.height + 'px';
  });
},
leave: function(el) {
  requestAnimationFrame(() => {
    el.style.height = '0px';
  });
},

方案2：借助Vue的$nextTick等DOM更新 #

Vue的$nextTick会在DOM更新完成后执行回调，刚好能帮我们等浏览器处理完初始样式：

enter: function(el) {
  this.$nextTick(() => {
    el.style.height = this.height + 'px';
  });
},
leave: function(el) {
  this.$nextTick(() => {
    el.style.height = '0px';
  });
},

方案3：CSSmax-height技巧（最省心） #

如果不想折腾JS钩子，直接用CSS的max-height模拟高度过渡更简洁：

.transition-height {
  max-height: 0;
  overflow: hidden;
  transition: max-height 250ms ease;
}
.transition-height.open {
  max-height: 1000px; /* 设一个比内容最大高度大的值就行 */
}

然后JS里只需要切换open状态，不用写一堆钩子：

toggle() {
  this.open = !this.open;
}

<div v-show="open" :class="['transition-height', { open: open }]">
  <!-- 你的内容 -->
</div>

这个方案唯一小缺点是如果max-height设得太大，过渡时长会有点不准，但日常场景完全够用。

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