Vue鼠标滚轮滚动切换路由效果的实现方法

个根路由组件(app下的根路由组件, 需要滚动切换的作为其子组件)
在根路由组件添加鼠标滚动时间监听, 在mounted中调用监听
当跳转到其他路由(跳出这个根路由时), 根路由组件会被销毁, 因此在根路由的destroed钩子函数中清除掉事件监听

Vue路由切换过渡
vue的过渡image.png
使用transition 包裹需要过渡的组件, 或者是一个div, 或者是一个路由, 当这个创建或者销毁的时候, 会加载指定的动画效果, 这个动画效果需要自己指定, 这里指定的是transitionName

然后在data里面声明这个, 但是这个值赋值为' ', 因为需要根据路由向前或者向后对应不同的name

当路由向前(这里是向下), 指定为slide-down

然后定义slide-down的不同状态下的激活效果为过渡效果
Vue鼠标滚轮滚动切换路由效果的实现方法_第1张图片
随后定义进入开始动画image.png
定义离开激活动画image.png
下面是一般是固定
即声明-enter-active, -leave-active为过渡效果
随后写-enter, -leave-active具体需要的变化
一般就是一个-enter, 一个-leave-active
Vue鼠标滚轮滚动切换路由效果的实现方法_第2张图片
接着就是怎么判断路由向前还是向后
首先是怎么向前向后切换路由

接着是怎么判断是前还是后, 在写路由的时候, 写上meta, 通过在"根组件"里监视路由变化时, 拿到路由信息, 对比这两个的大小来判断Vue鼠标滚轮滚动切换路由效果的实现方法_第3张图片

你可能感兴趣的:(Vue鼠标滚轮滚动切换路由效果的实现方法)