vue过渡动画transition

90 阅读 0 评论 60 点赞

我是靠谱客的博主含蓄毛巾，这篇文章主要介绍vue过渡动画transition，现在分享给大家，希望可以做个参考。

过渡动画

项目中不免遇到一些需要加动画的效果，最常用的就是显示隐藏的滑动效果：
显示和隐藏
1.通过vue的 transition标签控制：适用于单个跟标签元素动画效果

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//css
h1{
	background-color:orange;
}
/* 进入的起点,离开的终点 */
.v-enter,v-leave-to{
	transform:translateX(-100%)
}
.v-enter-active,v-leave-active{
	transition:0.5s linear
}
/*进入的终点，离开的起点*/
.v-enter-to,v-leave{
	transform:translateX(0)
}

复制代码

1
2
3
4
5
6
7
8
//html
<div>
	<button @click="isShow=!isShow" >显示隐藏</button>
	<transition appear><!--//appear属性,初始显示时动画显示-->
		<h1 v-show="isShow">你好啊！</h1>
	</transition>
</div>

2.transition-group标签适用于多个元素或者列表的动画效果,且必须指定唯一的key值

复制代码

1
2
3
4
5
6
7
8
9
//html
<div>
	<button @click="isShow=!isShow" >显示隐藏</button>
	<transition-group appear><!--//appear属性,初始显示时动画显示-->
		<h1 v-show="isShow" key="1">你好啊！</h1>
		<h1 v-show="isShow" key="2">我挺好的！</h1>
	</transition-group>
</div>