Vue 不定高展开动效及其原理
使用场景
在大多数 APP 中，都有问答模块，问答模块的静态页面开发并不复杂，也没有特殊的交互。唯一有一点难度应该是回答部分的展开特效。
展开时，需要从上往下将回答部分的 div 慢慢撑开，上面的箭头也要有旋转的特效。
收回时，需要从下往上将回答部分的 div 慢慢缩小，上面的箭头也要有旋转的特效。
对于一般的展开、隐藏特效，只需要在对应元素的 height 上面增加过渡效果即可。但问题是：不知道对应的 div 的高度，其高度是内部的元素自动撑开的，此时直接在 height 属性上面添加过渡效果会失效（后面会说明原因）。
对于箭头的旋转，则只需要在箭头元素的 transform 上面增加过渡效果，然后让其旋转 180 度（rotateZ(180deg)）即可，这个比较好实现。
背景
今天做需求时，正好需要做这种特效，先介绍一下列表的数据结构和其 DOM 结构。
列表数据结构如下：
// QaItem 表示问答的每一项interface QaItem {Q: string; // 问题A: string; // 回答show: boolean; // 是否展示}// QaList 表示问答列表type QaList = QaItem[];
项目中并未使用 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">{{ item.A }}</span></div></div></div>
上面的结构简化了一些交互逻辑和展示逻辑，默认问答列表的每一项都会展示。最外层包裹了一层 div，上面是标题，下面是问答列表，问答列表的每一项包括问题、箭头 icon 和答案。
实现
因为项目使用的框架是 Vue，所以以 Vue 为例，来分析一下如何实现它，以及其实现的原理。
回答是否展示，可以用一个变量控制，这里是 qaItem 的 show 属性。使用 v-show 实现，因为用户可能会多次点击箭头，导致回答频繁地展示或隐藏。
<divv-for="(item, ind) in qaList":key="ind"class="list-qa__item"><!-- 。。。省略不相关元素。。。 --><spanv-show="item.show"class="list-qa__answer">{{ item.A }}</span></div>
transition 组件
在 Vue 中，可以使用 transition 组件来为元素添加动态效果。transition 组件让我们可以为使用条件渲染（v-if、v-show）的元素添加进入、离开时的过渡效果。
<div id="demo"><button v-on:click="show = !show">Toggle</button><transition name="fade"><p v-if="show">hello</p></transition></div>
.fade-enter-active, .fade-leave-active {transition: opacity .5s;}.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {opacity: 0;}
这样在 name 为 fade 的 transition 组件包裹的 p 标签展示和隐藏时，会有一个 0.5s 的淡入淡出效果。
过渡效果原理
在展示时，p 标签的 opacity（透明度）会从 0（.fade-enter 类选择器中设定的值）开始增加，经过 0.5s 之后，增加至 opacity: 1（元素默认的透明度 opacity 为 1）。
在隐藏时，p 标签的 opacity（透明度）会从 1 开始减少，经过 0.5s 之后，减少至 opacity: 0（.fade-leave-to 类选择器中设定的值）。
这样就实现了淡入淡出效果。
同样的，如果我们想让一个元素展示时高度从 0 开始增加，经过某一个时间，达到具体的值；隐藏时高度从该具体值开始减少，经过某一个时间，达到 0。这样就能实现我们前面需要的效果。
我们可以用 css transition 为某一个元素设置过渡效果，过渡效果作用在这个元素的某个属性上、过渡效果的时长等。
.box {transition: height 1s;}
上面代表为 class 为 box 的元素设置了过渡效果，作用在它的 height 属性上面，过渡效果的时长为 1s。当该元素的高度从某一个值变化到另一个值时，就会有一个长为 1s 的过渡效果。
过渡效果的本质是：当作用的属性的值变化时，并不会立即从一个值变为另一个值，而是在变化的过程中，将中间状态呈现出来。
例如：设置了过渡效果的元素的高度（height）从 0 变化到 100px 时，并不是直接从 0 变化到 100px 的，其变化过程是一个连续的状态，从 0 到 1px，从 1px 到 2px······直到 100px。把中间的高度展现出来，就可以让用户看到过渡效果。
再例如：设置了过渡效果的元素的透明度（opacity）从 0 变化到 1 时，并不是直接从 0 变化到 1 的，其变化过程也是一个连续的状态，从 0 到 0.1，从 0.1 到 0.2······直到 opacity 为1。这样用户就可以看到一个元素从透明状态逐渐变得清晰。当然，并不一定就是从 0 变化到 0.1，然后从 0.1 变化到 0.2，这个过程是一个连续的过程，它的值在慢慢增加，增量是多少并不重要。
需要实现过渡效果，就需要一个起始态和一个终止态，浏览器能够从起始态逐步过渡到终止态。也就是从起始态到终止态之间的部分是连续的，是可以计算的，这样浏览器才能把中间的状态给我们呈现出来。
再回到之前的问题：不知道 div 的高度，其高度是内部的元素自动撑开的，此时直接在 height 属性上面添加过渡效果会失效。
为什么会失效？
对于一个 div，如果它的高度是由子元素撑开的，那么它的 css 样式 height 属性的值为 auto。从 0 变到 auto，或者从 auto 变到 0，其中间状态都是不可计算的，浏览器没发给我们展示出中间状态，所以我们看不到过渡效果。
既然从 0 变到 auto，或者从 auto 变到 0，中间状态无法计算，那我们可以显式地告诉浏览器一个数值，应该从 0 变到多少，或者从多少变到 0，让浏览器可以计算出中间状态，这样不就能看到过渡效果了吗？
解决
当展开时，起始态为 0，我们通过 getComputedStyle(element).height 得到元素的具体高度 x（终止态）。给元素设置 transition 属性，然后将元素的高度从 0 变到 x，这样就能实现展开的动效了。
<transitionname="slide"-enter="beforeEnter"="enter"-enter="afterEnter"-leave="beforeLeave"="leave"-leave="afterLeave"><spanv-show="item.show"class="list-qa__answer">{{ item.A }}</span></transition>
beforeLeave(el) {// 给元素设置过渡效果el.style.transition = '0.3s height ease-in-out';// 高度变化时，让其内容隐藏el.style.overflow = 'hidden';},leave(el) {el.style.height = 'auto';// 设置高度为具体的值el.style.height = window.getComputedStyle(el).height;// 强制浏览器回流，否则浏览器会合并两次元素的高度更改（回流重绘的知识）el.offsetHeight;el.style.height = '0px';},afterLeave(el) {// el.style.height = null;// 收尾工作，展示完过渡效果之后，设为原来的值el.style.transition = '';el.style.overflow = 'visible';},
这里需要给元素设置 overflow: hidden，在元素高度小于内部内容的高度时，才会隐藏内容。
同样地，隐藏时先通过 getComputedStyle(element).height 得到元素的具体高度 x（起始态），给元素设置 transition 属性，然后将元素的高度从 x 变到 0，这样就能实现隐藏的动效了。
beforeEnter(el) {// 给元素设置过渡效果el.style.transition = '0.3s height ease-in-out';// 高度变化时，让其内容隐藏el.style.overflow = 'hidden';},enter(el) {el.style.height = 'auto';// 保存元素原来的高度const endWidth = window.getComputedStyle(el).height;el.style.height = '0px';// 强制浏览器回流，否则浏览器会合并两次元素的高度更改（回流重绘的知识）el.offsetHeight;el.style.height = endWidth;},afterEnter(el) {// el.style.height = null;// 收尾工作，展示完过渡效果之后，设为原来的值el.style.transition = '';el.style.overflow = 'visible';},
箭头的旋转动效就比较简单了。先设置过渡效果，然后只需要在点击箭头的时候，动态为这个元素添加一个类名，让其旋转属性生效（rotateZ(180deg)）；当再一次点击的时候，去掉这个类名就好了。
<spanclass="list-qa__question__arrow":class="{'list-qa__question__rotate-arrow': !item.show}"="onClickPromblem(ind)"/>
onClickPromblem(index) {const qaItem = this.qaList[index];this.$set(qaItem, 'show', !qaItem.show);},
list-qa__question__arrow {width: 12px;height: 12px;background: url(https://m.hellobike.com/resource/helloyun/21588/RIBiB_SketchPngf4c3c2445f4522fe182c1d02d45a6201fa03ecfb14550a3269204012abdcfa09) center no-repeat;transition: transform .4s;}list-qa__question__rotate-arrow {transform: rotateZ(180deg);transition: transform .4s;}
The End
如果你觉得这篇内容对你挺有启发，请你轻轻点下小手指，帮我两个小忙呗：
1、点亮「在看」，让更多的人看到这篇满满干货的内容；
2、关注公众号「哈啰技术」，可第一时间收到最新技术推文。
如果喜欢就点个👍喔，有您的喜欢⛽，我们会更有动力输出有价值的技术分享滴。