vue.js - 使用一个 包装器转换多个子元素

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 hook在 .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>