提交 94467668 编写于 作者: M mehaotian

chore: 折叠面板修改打开后样式,增加透明度动画 ,动画时间改为 200ms

上级 41fc6e53
<template> <template>
<view class="uni-collapse-item"> <view class="uni-collapse-item">
<view class="uni-collapse-item__title" :class="{'open--active':is_open}" @click="openCollapse(!this.is_open)"> <view class="uni-collapse-item__title" @click="openCollapse(!this.is_open)">
<text class="uni-collapse-item__title-text" :class="{'is-disabled':disabled}">{{title}}</text> <text class="uni-collapse-item__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"> <view ref="boxRef" class="uni-collapse-item__content">
...@@ -92,9 +92,7 @@ ...@@ -92,9 +92,7 @@
background-color: #fff; background-color: #fff;
} }
.open--active {
background-color: #f0f0f0;
}
.down_arrow { .down_arrow {
width: 8px; width: 8px;
...@@ -118,7 +116,12 @@ ...@@ -118,7 +116,12 @@
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
} }
.open--active {
/* background-color: #f0f0f0; */
color: #bbb;
}
.is-disabled { .is-disabled {
color: #999; color: #999;
} }
...@@ -130,8 +133,8 @@ ...@@ -130,8 +133,8 @@
.uni-collapse-item__content-box { .uni-collapse-item__content-box {
width: 100%; width: 100%;
transition-property: transform; transition-property: transform , opacity;
transition-duration: 0.3s; transition-duration: 0.2s;
transform: translateY(-100%); transform: translateY(-100%);
opacity: 0; opacity: 0;
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册