如何通过单个<transition>标签为多个子元素设置不同过渡效果

嘿，我完全懂你现在的困扰！当父元素的v-if状态切换时，你想让模态框的背景模糊层和内容分别执行独立的过渡动画——背景做淡入淡出，内容做滑入滑出，但现在用单个<transition>标签把它们包在一起，导致两者共享了相同的过渡类，动画效果完全一样。别着急，这里有两个简单有效的解决方案：

方案一：给每个需要独立过渡的元素单独包裹<transition>标签 #

这种方式最直接，把背景层和内容层分别放在各自的<transition>标签里，为每个过渡定义专属的样式类：

<template>
  <div v-if="showModal">
    <!-- 背景模糊层的淡入淡出过渡 -->
    <transition name="fade">
      <div class="modal" @click="showModal = false"></div>
    </transition>
    
    <!-- 模态框内容的滑入滑出过渡 -->
    <transition name="slide">
      <div class="modal__content">
        <h3>模态框标题</h3>
        <p>这里是模态框内容</p>
        <button @click="showModal = false">关闭</button>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const showModal = ref(false)
</script>

<style scoped>
/* 背景层的过渡样式 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

/* 内容层的过渡样式 */
.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s ease;
}
.slide-enter-from, .slide-leave-to {
  transform: translateX(100%);
}

/* 基础布局样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal__content {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 300px;
  padding: 2rem;
  background-color: #fff;
  border-radius: 8px 0 0 8px;
}
</style>

当showModal状态切换时，两个<transition>会同步触发，各自执行对应的过渡动画，完美实现背景淡入、内容从右侧滑入的效果。

方案二：结合Animate.css指定独立过渡类 #

如果你已经在使用Animate.css库（从你提到的animated slideInRight能看出来），可以直接给每个<transition>标签单独配置过渡类，不需要自己写CSS：

<template>
  <div v-if="showModal">
    <transition 
      enter-active-class="animated fadeIn faster"
      leave-active-class="animated fadeOut faster"
    >
      <div class="modal" @click="showModal = false"></div>
    </transition>
    
    <transition 
      enter-active-class="animated slideInRight faster"
      leave-active-class="animated slideOutRight faster"
    >
      <div class="modal__content">
        <h3>模态框标题</h3>
        <p>这里是模态框内容</p>
        <button @click="showModal = false">关闭</button>
      </div>
    </transition>
  </div>
</template>

<!-- 别忘了引入Animate.css -->
<style>
@import 'animate.css';
</style>

这种方式更简洁，直接利用Animate.css预定义的动画类，让背景层用fadeIn/fadeOut，内容层用slideInRight/slideOutRight，同样能实现完全独立的过渡效果。

额外小提示 #

如果想要两个动画有先后顺序（比如先让背景淡入，再让内容滑入），可以给内容层的过渡类加上延迟，比如animated slideInRight faster delay-100，或者监听过渡的@enter事件手动触发另一个元素的过渡。不过大多数模态框场景下，同步触发的效果就已经很流畅啦～

内容的提问来源于stack exchange，提问作者korun