uniapp实现带过渡动画的手风琴折叠样式

最终效果

UI同学让做一个带过渡动画的手风琴折叠效果，点击一个元素展开，其他已展开元素自动收缩，每次最多只有一个元素展开，这是最终效果：

接下来讲我用css实现的思路

一、无过渡动画的手风琴

首先，uniapp做无过渡动画的最容易做了，因为Vue里只要用v-if或v-show来控制，判断index是否是当前的子组件就好了。因为我用了组件，我想父组件的事件openDetail触发能更新子组件的数据，所以我用:ref来更新子组件的boolean变量isOpen来触发v-show="isOpen"，记录lastIndex来关闭上个展开的子组件，确保每次点击最多只有一个展开。
父组件

	

...

子组件collapse-item

	专业
	均分
	入学
 
...
export default {
	data() {
		return {
			isOpen: false,
		}
	},
}	

二、有过渡动画的手风琴

现在来做过渡动画，我在做的时候，发现有以下几点需要注意：

1. 不能再用v-if或v-show

过渡动画的css实现大家肯定能想到是transition，而transition的动画是基于两个状态的来回变化的，不管是v-if的增删DOM节点还是v-show的display: none都是只有一个状态，无法满足前后两个状态，transition会失效。

2. 用:class动态绑定样式

可以用 :class的对象语法:class="isOpen ? 'content-open' : 'content-close'"来动态绑定展开和收起两种状态的样式。
展开状态设置高度height值，而收起状态设height为0，两个状态都设置transition，就能实现过渡动画。

我们来更新一下子组件collapse-item的代码：

	专业
	均分
	入学
 
...
export default {
	data() {
		return {
			isOpen: false,
		}
	},
}	
...

3. 子元素也要设置transition

写完上面的代码以后，我发现了一个问题，文字出现的比背景颜色快，在背景颜色还没有过渡动画展开完时，文字就已经全出现了，而且文字并没有像我预想一样的也有展开动画效果。

问题虽然不大，但是视觉上给人的体验非常不好，所以我一定要解决。

正当我无比困惑时，我突然想到，是不是transition属性无法继承？
我就查了一下W3C文档：https://drafts.csswg.org/css-transitions/

果然transition是inherited:no，无法继承的。
所以我们子元素也都要设置transition，才能达到背景颜色和文字同时有过渡动画的展开和收起的效果。
再更新一下子组件的代码：

	专业
	均分
	入学
 
...
export default {
	data() {
		return {
			isOpen: false,
		}
	},
}	
...

content-open里设置overflow: hidden，展开时文字就不会浮在下一个元素上。
至于我为什么子元素的item-close不设置transition 呢，因为三行文字先会缩成一行重叠的字再消失，太丑了，大家试试就知道了，所以干脆文字在close时直接消失好了～

我们的带过渡动画的手风琴折叠效果就做好啦，效果和文章开头的图一样～

觉得有用的请点个赞，谢谢大家的观看～转载请带本文链接