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

您可以在.modal 淡入后使用JS hook 来触发幻灯片动画：

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