Vue 不定高展开动效原理详解

使用场景

在大多数 APP 中，都有问答模块，类似于下面这种（bilibili 为例）：

问答模块的静态页面开发并不复杂，也没有特殊的交互。唯一有一点难度应该是回答部分的展开特效。

• 展开时，需要从上往下将回答部分的 div 慢慢撑开，上面的箭头也要有旋转的特效。
• 收回时，需要从下往上将回答部分的 div 慢慢缩小，上面的箭头也要有旋转的特效。

对于一般的展开、隐藏特效，只需要在对应元素的 height 上面增加过渡效果即可。但问题是： 不知道对应的 div 的高度，其高度是内部的元素自动撑开的，此时直接在 height 属性上面添加过渡效果会失效（后面会说明原因）。

对于箭头的旋转，则只需要在箭头元素的 transform 上面增加过渡效果，然后让其旋转 180 度（rotateZ(180deg)）即可，这个比较好实现。

背景

今天做需求时，正好需要做这种特效。也就是上面的第一张图。先介绍一下列表的数据结构和其 DOM 结构。

列表数据结构如下：

// Item 表示问答的每一项
interface Item {Q: string;// 问题A: string;// 回答show: boolean;// 是否展示
}

// List 表示问答列表
type List = Item[]; 

项目中并未使用 TypeScript，这里用 interface 是为了方便理解。

DOM 结构（Vue 版本）如下：

<div class="qa panel"><div class="qa__title">常见问题</div><div class="list-qa"><divv-for="(item, ind) in qaList":key="ind"class="list-qa__item"><div class="list-qa__question"><span>{
  { item.Q }}</span><span class="list-qa__question__arrow" /></div><span class="list-qa__answer">{
  { ite