使用一个<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>