提交 18f200e2 编写于 作者: M mehaotian

fix: 修复折叠面板动画失效的问题

上级 38b3b2e1
<template> <template>
<view class="uni-collapse-item"> <view class="uni-collapse-item">
<view class="uni-collapse-item__title" @click="openCollapse(!is_open)"> <view class="uni-collapse-item__title" @click="openCollapse(!is_open)">
<text class="uni-collapse-item__title-text" <text class="uni-collapse-item__title-text" :class="{'is-disabled':disabled,'open--active':is_open}">{{title}}</text>
:class="{'is-disabled':disabled,'open--active':is_open}">{{title}}</text>
<view class="down_arrow" :class="{'down_arrow--active': is_open}"></view> <view class="down_arrow" :class="{'down_arrow--active': is_open}"></view>
</view> </view>
<view ref="boxRef" class="uni-collapse-item__content" :class="{'box-open--active':is_open}"> <view ref="boxRef" class="uni-collapse-item__content" :class="{'box-open--active':is_open}">
<view ref="contentRef" class="uni-collapse-item__content-box" :class="{'content-open--active':!box_is_open}"> <view ref="contentRef" class="uni-collapse-item__content-box" :class="{'content-open--active':box_is_open}">
<slot></slot> <slot></slot>
</view> </view>
</view> </view>
</view> </view>
...@@ -35,10 +34,10 @@ ...@@ -35,10 +34,10 @@
data() { data() {
return { return {
height: 0, height: 0,
is_open: this.open as boolean, is_open: this.open as boolean,
box_is_open:this.open as boolean, box_is_open: this.open as boolean,
boxNode: null as UniElement | null, boxNode: null as UniElement | null,
contentNode: null as UniElement | null, contentNode: null as UniElement | null,
}; };
}, },
watch: { watch: {
...@@ -66,23 +65,25 @@ ...@@ -66,23 +65,25 @@
this.is_open = open this.is_open = open
this.openOrClose(open) this.openOrClose(open)
}, },
openOrClose(open : boolean) { openOrClose(open : boolean) {
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
setTimeout(()=>{ setTimeout(() => {
this.box_is_open = !open this.box_is_open = open
},10) }, 10)
// #endif // #endif
// #ifndef MP-WEIXIN // #ifndef MP-WEIXIN
const boxNode = this.boxNode?.style!; const boxNode = this.boxNode?.style!;
const contentNode = this.contentNode?.style!; const contentNode = this.contentNode?.style!;
let hide = open ? 'flex' : 'none'; let hide = open ? 'flex' : 'none';
const opacity = open ? "1" : "0" const opacity = open ? "1" : "0"
let ani_transform = open ? 'translateY(0)' : 'translateY(-100%)'; let ani_transform = open ? 'translateY(0)' : 'translateY(-100%)';
boxNode.setProperty('display', hide); boxNode.setProperty('display', hide);
this.$nextTick(() => { this.$nextTick(() => {
contentNode.setProperty('transform', ani_transform); setTimeout(() => {
contentNode.setProperty('opacity', opacity); contentNode.setProperty('transform', ani_transform);
}) contentNode.setProperty('opacity', opacity);
}, 10)
})
// #endif // #endif
} }
} }
...@@ -127,19 +128,20 @@ ...@@ -127,19 +128,20 @@
.uni-collapse-item .open--active { .uni-collapse-item .open--active {
/* background-color: #f0f0f0; */ /* background-color: #f0f0f0; */
color: #bbb; color: #bbb;
} }
.uni-collapse-item .is-disabled { .uni-collapse-item .is-disabled {
color: #999; color: #999;
} }
.uni-collapse-item .uni-collapse-item__content { .uni-collapse-item .uni-collapse-item__content {
display: none; display: none;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.uni-collapse-item .box-open--active {
display: flex; .uni-collapse-item .box-open--active {
display: flex;
} }
.uni-collapse-item .uni-collapse-item__content-box { .uni-collapse-item .uni-collapse-item__content-box {
...@@ -148,10 +150,11 @@ ...@@ -148,10 +150,11 @@
transition-duration: 0.2s; transition-duration: 0.2s;
transform: translateY(-100%); transform: translateY(-100%);
opacity: 0; opacity: 0;
}
.uni-collapse-item .content-open--active {
transform: translateY(0%);
opacity: 1;
} }
/* #ifdef MP-WEIXIN */
.uni-collapse-item .content-open--active {
transform: translateY(0%);
opacity: 1;
}
/* #endif */
</style> </style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册