代码学堂(uxuew.cn)提供付费解决PHP WEB开发等技术服务,如果需要请 点击加我QQ:1662935793.
>web前端 > vuejs学习 > vue-router页面滑入滑出特效制作

vue-router页面滑入滑出特效制作

vuejs学习 围观5620次 更新日期:2017-09-21 15:15:31 留下足迹

slideleft:左滑,slideright:右滑
<transition name="slidemode">
	<router-view></router-view>
</transition>

css样式:
.slideleft-enter-active,.slideleft-leave-active,.slideright-enter-active,.slideright-leave-active{transition: all 1s;}
.slideleft-enter,.slideleft-leave-to,.slideright-enter,.slideright-leave-to{opacity: 0;}
.slideright-enter {transform: translateX(+100%);}
.slideright-leave-active {transform: translateX(-100%);}
.slideleft-enter {transform: translateX(-100%);}
.slideleft-leave-active {transform: translateX(+100%);}

转载请注明:代码学堂>web前端 > vuejs学习 > vue-router页面滑入滑出特效制作

喜欢 (592) or 分享 (286)
随机文章