How to trigger an event at the end of q-slide-transition
-
I need an element that is a custom dropdown inside a menu. I tried first with q-popover, but due to the fact that it uses position fixed to position the popover it breaks when scrolling the page.
After that I’m using a custom div with position absolute to fulfill my purposes, this div receives animation when opening / closing with q-slide-transition.
When closing the popover disappears abruptly due to the use of v-if, so does v-show.
As an attempt to solve I used an external div, but as I already imagined the popover that is div parent does not disappear alone, and if I put the v-if in it will happen the same. What I thought was triggered an event when the q-slide-transition animation was done to close the parent div at the right time, but I did not find any such event for q-slide-transition.
Any suggestion?
The code is as follows:
<template>
<div class=“col-auto” style=“border: 1px red solid;”>
<q-btn :id="_uid" class=“dropBtn no-shadow” @click=“toggleVisibility”>
<q-icon name=""/>
<div class=“dropPopover z-absolute bg-primary”>
<q-slide-transition>
<div v-if=“visible”>
<l-widget v-for=“i in 3” :widget="{}"/>
</div>
</q-slide-transition>
</div>
</q-btn>
</div>
</template><script>
import {
QBtn,
QIcon,
QSlideTransition
} from ‘quasar’
import LWidget from ‘./widget’
export default {
components: {
QBtn,
QIcon,
LWidget,
QSlideTransition
},
data: function () {
return {
visible: false
}
},
methods: {
toggleVisibility: function () {
this.visible = !this.visible
}
}
}
</script><style lang=“stylus”>
@import ‘~src/themes/app.variables.styl’;
.row,
.dropBtn,
.dropBtn .q-btn-inner{
overflow: visible!important;
}
.dropBtn{
border: 1px $secondary solid;
border-radius: 0!important;
padding: 0!important;
width: 72px;
margin-top: 2px;
position: relative;
}
.dropPopover{
border: 1px $secondary solid;
padding: 4px 14px;
max-height: 250px!important;
min-width: 320px!important;
width: 320px!important;
max-width: 320px!important;
overflow-y: auto;
overflow-x: hidden;
position: absolute!important;
top: 34px;
right: -1px;
}
</style>