const transitionStyle = '0.3s height ease-in-out';
const Transition = {
beforeEnter(el) {
el.style.transition = transitionStyle;
if (!el.dataset) el.dataset = {};
el.style.height = 0;
},
enter(el) {
if (el.scrollHeight !== 0) {
el.style.height = `${el.scrollHeight}px`;
} else {
el.style.height = '';
}
el.style.overflow = 'hidden';
},
afterEnter(el) {
el.style.transition = '';
el.style.height = '';
},
beforeLeave(el) {
if (!el.dataset) el.dataset = {};
el.style.display = 'block'; // 添加这一行
el.style.height = `${el.scrollHeight}px`;
el.style.overflow = 'hidden';
},
leave(el) {
if (el.scrollHeight !== 0) {
el.style.transition = transitionStyle;
el.style.height = 0;
}
},
afterLeave(el) {
el.style.transition = '';
el.style.height = '';
},
};
export default {
name: 'CollapseTransition',
functional: true,
render(h, { children }) {
const data = {
on: Transition,
};
return h('transition', data, children);
},
};
//页面
import CollapseTransition from "../commer/collapse-transition";
export default {
components: {
CollapseTransition,
},
<div v-for="(item, i) in list" :key="i" class="item">
<div class="item-name" @click="change(item, true)">
<div>{{ item.name }}</div>
<div>
{{ item.count }}
<Icon type="ios-arrow-forward" v-if="!item.isExtend" />
<Icon type="ios-arrow-down" v-else />
</div>
</div>
<CollapseTransition>
<div class="process" ref="child" v-show="item.isExtend">
<!-- 需要折叠的一些内容啦啦啦啦 需要折叠的一些内容啦啦啦啦
需要折叠的一些内容啦啦啦啦 -->
<Circle
:size="250"
:trail-width="4"
:stroke-width="5"
:percent="75"
stroke-linecap="square"
stroke-color="#43a3fb"
>
<div class="demo-Circle-custom">
<h1>42,001,776</h1>
<p>消费人群规模</p>
<span>
总占人数
<i>75%</i>
</span>
</div>
</Circle>
</div>
</CollapseTransition>
</div>
list: [
{
id: 1,
name: "hsfhfhfkhf",
count: 255,
isExtend: false,
},
{
id: 2,
name: "hsfhfhfkhf",
count: 255,
isExtend: false,
},
{
id: 3,
name: "hsfhfhfkhf",
count: 255,
isExtend: false,
},
{
id: 4,
name: "hsfhfhfkhf",
isExtend: false,
},
{
id: 5,
name: "hsfhfhfkhf",
count: 255,
isExtend: false,
},
],
change(item, type) {
this.list.forEach((x) => {
if (x.id === item.id) {
if (!x.isExtend) {
x.isExtend = true;
} else {
x.isExtend = false;
}
} else {
x.isExtend = false;
}
});
},
