过渡动画
项目中不免遇到一些需要加动画的效果,最常用的就是显示隐藏的滑动效果:
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>