vue.js - How do I make a nested transitions run before the parent transition leaves in Vue 2

Question

I would like to get a nested transition to run, before the parent transition runs the leave transition. Unfortunately the nested transition doesn't get performed.

The current code works as expected on enter

<!-- ParentComponent.vue -->
<template>
    <div>
        <child-component v-if="displayChild"></child-component>
    </div>
</template>

<!-- ChildComponent.vue -->
<template>
    <transition
        name="fade"
        @before-leave="showContent = false"
        @after-enter="showContent = true"
    >
        <div>
            <transition name="scale"> <!-- Does not run on leave -->
                <div v-if="showContent">
                    <slot></slot>
                </div>
            </transition>
        </div>
    </transition>
</template>

<script>
export default {
    data() {
        return {
            showContent: false
        }
    }
}
</script>

question from:https://stackoverflow.com/questions/65943241/how-do-i-make-a-nested-transitions-run-before-the-parent-transition-leaves-in-vu

Answer 1

Waitting for answers