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