使用场景
在大多数 APP 中,都有问答模块,类似于下面这种(bilibili 为例):
![](https://i-blog.csdnimg.cn/blog_migrate/4e829b6becbe47b506c90652e695acda.png)
问答模块的静态页面开发并不复杂,也没有特殊的交互。唯一有一点难度应该是回答部分的展开特效。
- 展开时,需要从上往下将回答部分的 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">{
{ item.A }}</span></div></div>
&l