您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要讲的是路由切换的时候动画效果的实现,可以根据不同的路径去改变动画的效果,以下就是源码,可供参考:
<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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。