vue 实现 v-show 或 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=".
·
实际效果:
一、素材图
<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>
注意:当两个切换的组件名称一致时,需要加 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);
}
更多推荐
已为社区贡献7条内容
所有评论(0)