Vue.js v2.6.11动态组件过渡效果无法实现求助

你的动态组件过渡失效的核心原因是scoped样式的作用域限制：

当<style>标签添加scoped属性后，Vue会为当前组件内的所有元素自动添加一个唯一的data-v-xxx属性，同时样式选择器也会被改写为包含该属性的形式（比如.component-fade-enter-active会变成.component-fade-enter-active[data-v-xxx]）。但动态组件作为独立的子组件，它的根元素不会继承这个data-v-xxx属性，导致过渡相关的样式无法匹配到动态组件的根元素，因此过渡效果不生效。

而你代码中第二个过渡（div和p的切换）能正常工作，是因为这两个元素是当前组件的直接子元素，会被加上data-v-xxx属性，样式可以正常匹配。

解决方案1：移除scoped属性 #

如果过渡样式不需要局限在当前组件内，可以直接去掉scoped：

<style>
.component-fade-enter-active,
.component-fade-leave-active {
  transition: all 6s ease;
}

.component-fade-enter,
.component-fade-leave-to {
  opacity: 0;
}
</style>

解决方案2：使用深度选择器（保留scoped） #

如果需要保留scoped样式的作用域，可以使用Vue 2的深度选择器/deep/（或::v-deep），让样式穿透到子组件：

<style scoped>
/deep/ .component-fade-enter-active,
/deep/ .component-fade-leave-active {
  transition: all 6s ease;
}

/deep/ .component-fade-enter,
/deep/ .component-fade-leave-to {
  opacity: 0;
}
</style>

修改后，点击Toggle按钮时，动态组件的透明度过渡效果就能正常触发了。

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