Переход нескольких дочерних элементов с помощью одной оболочки <transition>

Question

Я хочу установить несколько переходов (для отдельных дочерних элементов) внутри одного родителя v-if изменение состояния.

Например, когда я отображаю модальное изображение, я хочу, чтобы размытие фона fadeIn (используя непрозрачность) и модальный контент для slideIn (используя переход или анимацию). Моя текущая ситуация заключается в следующем, когда я использую переход элемента размытия фона (.modal) переходит вместе с контентом (.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

Вы можете использовать крюк JS после .modal появляется, чтобы вызвать анимацию слайда:

<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>