最近发现使用vue的transition和transition-group组件有一个现象，如果transition过渡组件的父元素也是同时切换显示隐藏的话，子元素的动画效果就失效了，即使给过渡加上延迟时间也是没有效果的。观察后可以发现transition组件并没有添加name-enter，name-enter-active等类名。

例如下面这个例子，这是一个点击后弹出来的弹出层，父盒子主要用来遮罩，然后希望根据条件显示不同的子元素并带有动画效果

<div class="father" v-show="isShowFather">
	<transition name="fade" tag="div">
		<div class="child" v-show="childType==1">
			child1
		</div>
		<div class="child" v-show="childType==2">
			child2
		</div>
		<div class="child" v-show="childType==3">
			child3
		</div>
	</transition>
</div>

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s linear;
}
.fade-enter-to,
.fade-leave {
  opacity: 1;
}

结果并没有动画效果

解决方法：

<transition name="fade" tag="div">
	<div class="father" v-show="isShowFather">
		<div class="child" v-show="childType==1">
			child1
		</div>
		<div class="child" v-show="childType==2">
			child2
		</div>
		<div class="child" v-show="childType==3">
			child3
		</div>
	</div>
</transition>

.fade-enter .child,
.fade-leave-to .child{
  opacity: 0;
}
.fade-enter-active .child,
.fade-leave-active .child{
  transition: all 0.5s linear;
}
.fade-enter-to .child,
.fade-leave .child{
  opacity: 1;
}

这样既可以控制父元素的动画也可以控制子元素的动画，transition-group也是同样的道理

==============================
如果有大佬有更好的办法，希望可以评论区留言谢谢！