vue过渡动画transition

过渡动画

项目中不免遇到一些需要加动画的效果，最常用的就是显示隐藏的滑动效果：

1.通过vue的 transition标签控制：适用于单个跟标签元素动画效果

//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)
}

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

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

//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>