最终效果
UI同学让做一个带过渡动画的手风琴折叠效果,点击一个元素展开,其他已展开元素自动收缩,每次最多只有一个元素展开,这是最终效果:
接下来讲我用css实现的思路
一、无过渡动画的手风琴
首先,uniapp做无过渡动画的最容易做了,因为Vue里只要用v-if
或v-show
来控制,判断index是否是当前的子组件就好了。因为我用了组件,我想父组件的事件openDetail
触发能更新子组件的数据,所以我用:ref
来更新子组件的boolean变量isOpen
来触发v-show="isOpen"
,记录lastIndex
来关闭上个展开的子组件,确保每次点击最多只有一个展开。
父组件
<view>
<collapse-item v-for="(item, index) in list" :key="index"
@tap="openDetail(index)" :ref="'collapse'+index"
</collapse-item>
</view>
...
<script>
export default {
data() {
return {
lastIndex: