vue中v-if v-show 的动画过渡如何实现

<transition name="sun" mode="out-in">
		<image v-if="xxx"  key="like"></image>
		<image v-else  key="unlike"></image>
</transition>

注意：当两个切换的组件名称一致时，需要加 key 属性，以区分两个组件，否则动画不会生效

动画进行时的class

.sun-enter-active, .sun-leave-active {
		transition: all .15s cubic-bezier(0.42, 0, 0.34, 1.55);
}

设置进场开始的状态和离场结束的状态，都是缩放到0

.sun-enter, .sun-leave-to {
		 transform: scale(0);
}
	

设置进场结束的状态和离场开始的状态, 都是缩放到1

.sun-enter-to, .sun-leave {
	transform: scale(1);
}