wangpeng
/
integrated_traffic_vue
forked from integrated_whb/integrated_whb_vue
1
0
Fork 0
Code Pull Requests Activity

增加动画

pull/3/head
LiuJiaNan 2024-02-27 17:02:30 +08:00
parent 92c577a110
commit d7200aba12
1 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/views/BI/components/bottom_options.vue
View File

@ -10,17 +10,22 @@
<img :src="item.check ? item.imgSelect : item.img" alt="" /> <img :src="item.check ? item.imgSelect : item.img" alt="" />
<div class="title">{{ item.title }}</div> <div class="title">{{ item.title }}</div>
<div class="child_container"> <div class="child_container">
<!-- <transition--> <transition
<!-- enter-active-class="animate__animated animate__bounceIn"--> enter-active-class="animate__animated animate__bounceIn"
<!-- leave-active-class="animate__animated animate__bounceOut"--> leave-active-class="animate__animated animate__bounceOut"
<!-- mode="out-in"--> mode="out-in"
<!-- >--> >
<div v-show="item.check" :class="['child_options', item.type]"> <div
v-show="item.check"
:class="['child_options', item.type, { active: item.check }]"
>
<div <div
v-for="(item1, index1) in item.list" v-for="(item1, index1) in item.list"
:key="item1.title" :key="item1.title"
class="child_option" class="child_option"
@click.stop="fnBottomChildOptionsListChange(index, item1, index1)" @click.stop="
fnBottomChildOptionsListChange(index, item1, index1)
"
> >
<img :src="item1.check ? item1.imgSelect : item1.img" alt="" /> <img :src="item1.check ? item1.imgSelect : item1.img" alt="" />
<div class="tit" :class="item1.check ? 'active' : ''"> <div class="tit" :class="item1.check ? 'active' : ''">
@ -28,7 +33,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- </transition>--> </transition>
</div> </div>
</div> </div>
</div> </div>
@ -469,7 +474,10 @@ const fnBottomChildOptionsListChange = (index, item1, index1) => {
1; 1;
border-left: none; border-left: none;
border-right: none; border-right: none;
display: none;
&.active {
display: flex; display: flex;
}
.child_option { .child_option {
text-align: center; text-align: center;