vue 实现 v-show 或 v-if 的动画过渡_vue 给 v-if 添加动画

实际效果：

一、素材图

<transition name="zoom" mode="out-in">
		<image v-if="!video.like" @click="onLike" src="../../static/images/like.png" key="like"></image>
		<image v-else @click="onUnlike" src="../../static/images/like_after.png"key="unlike"></image>
</transition>
1
2
3
4

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

二、css

/** 动画进行时的class **/
.zoom-enter-active, .zoom-leave-active {
		transition: all .15s cubic-bezier(0.42, 0, 0.34, 1.55);
}
			
/** 设置进场开始的状态和离场结束的状态，都是缩放到0 **/
.zoom-enter, .zoom-leave-to {
		 transform: scale(0);
}
			
/** 设置进场结束的状态和离场开始的状态, 都是缩放到1 **/
.zoom-enter-to, .zoom-leave {
	transform: scale(1);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14