I want to set multiple transitions (on separate child elements) inside one parent v-if
state change.
For example when I display a modal I want the background blur to fadeIn
(using opacity) and the modal content to slideIn
(using transition or animation). My current situation is the following, when I use the transition the background blur element (.modal
) is transitioning along with the content (.modal__content
):
<transition enter-active-class="animated slideInRight" leave-active-class="animated slideOutRight">
<div class="modal" v-if="isVisible">
<div class="modal__content">
</slot><slot/>
</div>
</div>
</transition>
You can use a JS hook after the .modal
fades in to trigger the slide animation:
<template>
<transition name="fade" @after-enter="showContent = true">
<div class="modal" v-if="isVisible">
<transition name="slide">
<div class="modal__content" v-if="showContent">
</div>
</transition>
</div>
</transition>
</template>
<script>
export default {
data() {
return {
isVisible: false,
showContent: false
};
}
};
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With