铁雪资源网 Design By www.gsvan.com
这篇文章主要讲的是路由切换的时候动画效果的实现,可以根据不同的路径去改变动画的效果,以下就是源码,可供参考:
<template> <div id="app"> <transition :name="transitionName"> <router-view class="child-view"></router-view> </transition> </div> </template> <script> export default { name: 'app', data () { return { transitionName: 'slide-left' } }, mounted () { }, //监听路由的路径,可以通过不同的路径去选择不同的切换效果 watch: { '$route' (to, from) { if(to.path == '/'){ this.transitionName = 'slide-right'; }else{ this.transitionName = 'slide-left'; } } } } </script> <style> .child-view { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all .5s cubic-bezier(.55,0,.1,1); } .slide-left-enter, .slide-right-leave-active { opacity: 0; -webkit-transform: translate(30px, 0); transform: translate(30px, 0); } .slide-left-leave-active, .slide-right-enter { opacity: 0; -webkit-transform: translate(-30px, 0); transform: translate(-30px, 0); } </style>
路由的api链接在这,详细的可以去看这https://router.vuejs.org/zh-cn/advanced/transitions.html
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无Vue2路由动画效果的实现代码的评论...