【在VUE中滑轮滚动切换路由并用animate.css添加动效】

本例使用animate.css为路由切换添加动画，动过滚轮上下滚动切换路由

官网地址：animate.css

1.下载依赖

npm install animate.css –save

2. main.js中引入

import animated from ‘animate.css’

Vue.use(animated)

3.使用

mode="out-in"   防止路由进出动效同时出现。

enterClass leaveClass 是不同的时候对应的animate.css的动效类名

        <transition
            mode="out-in"
            :enter-active-class="enterClass" 
            :leave-active-class="leaveClass">
            <router-view></router-view>
        </transition>

4.代码

<template>
    <div class="layout">
        <Header></Header>
        <transition
            mode="out-in"
 6             :enter-active-class="enterClass" 
 7             :leave-active-class="leaveClass">
            <router-view></router-view>
        </transition>
        <!-- <Footer></Footer> -->
    </div>
</template>
--------------------------------------------------------
    data() {
        return {
16             enterClass: '',
17             leaveClass: '',
            direction: ''
        }
    },
--------------------------------------------------------
    mounted() {
        window.addEventListener('mousewheel', this.handleScroll, false)
    },
    beforeDestroy() {
        window.removeEventListener('mousewheel', this.handleScroll)
    },
    methods: {
        handleScroll(e) {
          //用来判断滚轮是向上滑动还是向下
          // >0是滚轮向下，页面向上
          this.leaveClass = e.deltaY > 0 
? 'animate__animated animate__bounceOutUp' 
:  'animate__animated animate__bounceOutDown'
红色 绿色是必填的，蓝色是对应的animate.css的类名,如下图
          this.enterClass = e.deltaY > 0
 ? 'animate__animated animate__bounceInUp'
 : 'animate__animated animate__bounceInDown'
        }
    }    

 

 5. 滚轮实现路由切换代码

由于监听滚轮事件，需要再每个组件页面中监听，故将其混入进去

注：changeActive需要放在

export default {
    data() {
        return {
            navList: [
                {
                  id: 0,
                  name: '首页',
                  path: '/xyzh/home'
                },
                {
                  id: 1,
                  name: '关于我们',
                  path: '/xyzh/aboutUs'
                },
                {
                  id: 2,
                  name: '服务对象',
                  path: '/xyzh/service'
                }
            ]
        }
    },
// mounted的时候监听滚轮事件，对应的方法为methods中handleScroll
    mounted() {
        window.addEventListener('mousewheel', this.handleScroll, false)
    },
// 组件销毁的时候把监听事件移除
    beforeDestroy() {
        window.removeEventListener('mousewheel', this.handleScroll)
    },
    methods: {
        handleScroll(e) {
           //用来判断滚轮是向上滑动还是向下
          let direction = e.deltaY>0?'down':'up' 
          // console.log(direction)
          let arrList=this.navList
          //鼠标滚轮向下或后
          if(direction=='down'){
              if(this.changeActive<arrList.length-1){
                  
                  this.changeActive=this.changeActive+1 
                  //跟随着选项卡而切换，以changeActive作为下标实现路由的path的读取
                  this.$router.push({
                    path:arrList[this.changeActive].path
                  })
              }
          }else{//向上或前
              if(this.changeActive>0){
                  this.changeActive=this.changeActive-1
                  this.$router.push({
                    path:arrList[this.changeActive].path
                  })
              }
          }
        }
    }
}