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

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

@ -10,25 +10,30 @@
<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 <div
v-for="(item1, index1) in item.list" v-show="item.check"
:key="item1.title" :class="['child_options', item.type, { active: item.check }]"
class="child_option"
@click.stop="fnBottomChildOptionsListChange(index, item1, index1)"
> >
<img :src="item1.check ? item1.imgSelect : item1.img" alt="" /> <div
<div class="tit" :class="item1.check ? 'active' : ''"> v-for="(item1, index1) in item.list"
{{ item1.title }} :key="item1.title"
class="child_option"
@click.stop="
fnBottomChildOptionsListChange(index, item1, index1)
"
>
<img :src="item1.check ? item1.imgSelect : item1.img" alt="" />
<div class="tit" :class="item1.check ? 'active' : ''">
{{ item1.title }}
</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: flex; display: none;
&.active {
display: flex;
}
.child_option { .child_option {
text-align: center; text-align: center;