开发者学堂课程【Vue.js 入门与实战:路由-为路由切换启动动画】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/586/detail/8196
路由-为路由切换启动动画
上节已经学习过了点击路由实现切换,本节主要为这个切换过程,添加一个动画效果:
//创建vue实例,得到ViewMode1 var Vm = new Vue({ el: ‘#app' data: {} , methods: {} router:routerobj//将路由规则对像,注册到vm实例上用来监听url 地址的变化,然后展示对应的组件 }) ; </ script>
给图片加动画:
代码:
第一步:
<transition> <router-view></router-view> </ transition>
第二步:
.v-enter , .v-leave-to{opacity: 0; transform: translatex(140px); .v-enter-active, .v-leave-active { transition: al1 0.5s ease;}
输出的结果:
已经有了过渡效果,但不是很美观,所以再给其添加一个过渡模式:
<transition mode=“out-in”> <router-view></router-view> </ transition>
这就是路由通过动画控制,这样会让用户感觉操作起来比较流畅。