网站定制公司地址,邢台手机网站制作,广州网站制作品牌,企业展厅方案主要实现的是页面跳转的时候一个页面从左边出去#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);
}
