北京开发网站建设,360网站兼容模式,帮传销做网站,网站的建设目标是什么意思主要实现的是页面跳转的时候一个页面从左边出去#xff0c;一个页面从右边进来#xff0c;通过css3实现的#xff0c;可以自己自行修改
html代码
templatediv idappdiv classrouter-parenttransition :nametra…主要实现的是页面跳转的时候一个页面从左边出去一个页面从右边进来通过css3实现的可以自己自行修改
html代码
templatediv idappdiv classrouter-parenttransition :nametransitionName modeout-inrouter-view classhome-router/router-view/transition/div/div
/template
js代码
export default {name: app,data () {return {transitionName: slide-right}},components:{},computed: {}
}
css代码
.router-parent{position: relative;width: 100%;height: 100%;
}
.home-router {position: absolute;width: 100%;height: 100%;transition: all .5s ease;
}
.slide-left-enter,.slide-right-leave-active {opacity: 0;-webkit-transform: translate(-100%, 0);transform: translate(-100%, 0);
}.slide-left-leave-active,
.slide-right-enter {opacity: 0;-webkit-transform: translate(-100%, 0);transform: translate(-100% 0);
}
