Transitioning multiple child elements with one <transition> wrapper

Question

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>

Answer 1

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>