【在VUE中使用animate.css预设动画】

2022-01-25 03:44:35

本例使用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的动效类名

1         <transition
2             mode="out-in"
3             :enter-active-class="enterClass" 
4             :leave-active-class="leaveClass">
5             <router-view></router-view>
6         </transition>

4.代码

 1 <template>
 2     <div class="layout">
 3         <Header></Header>
 4         <transition
 5             mode="out-in"
 6             :enter-active-class="enterClass" 
 7             :leave-active-class="leaveClass">
 8             <router-view></router-view>
 9         </transition>
10         <!-- <Footer></Footer> -->
11     </div>
12 </template>
13 --------------------------------------------------------
14     data() {
15         return {
16             enterClass: ‘‘,
17             leaveClass: ‘‘,
18             direction: ‘‘
19         }
20     },
21 --------------------------------------------------------
22     mounted() {
23         window.addEventListener(‘mousewheel‘, this.handleScroll, false)
24     },
25     beforeDestroy() {
26         window.removeEventListener(‘mousewheel‘, this.handleScroll)
27     },
28     methods: {
29         handleScroll(e) {
30           //用来判断滚轮是向上滑动还是向下
31           // >0是滚轮向下，页面向上
32           this.leaveClass = e.deltaY > 0 
33 ? ‘animate__animated animate__bounceOutUp‘ 
34 :  ‘animate__animated animate__bounceOutDown‘
35 红色 绿色是必填的，蓝色是对应的animate.css的类名,如下图
36           this.enterClass = e.deltaY > 0
37  ? ‘animate__animated animate__bounceInUp‘
38  : ‘animate__animated animate__bounceInDown‘
39         }
40     }

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

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

注：changeActive需要放在

 1 export default {
 2     data() {
 3         return {
 4             navList: [
 5                 {
 6                   id: 0,
 7                   name: ‘首页‘,
 8                   path: ‘/xyzh/home‘
 9                 },
10                 {
11                   id: 1,
12                   name: ‘关于我们‘,
13                   path: ‘/xyzh/aboutUs‘
14                 },
15                 {
16                   id: 2,
17                   name: ‘服务对象‘,
18                   path: ‘/xyzh/service‘
19                 }
20             ]
21         }
22     },
23 // mounted的时候监听滚轮事件，对应的方法为methods中handleScroll
24     mounted() {
25         window.addEventListener(‘mousewheel‘, this.handleScroll, false)
26     },
27 // 组件销毁的时候把监听事件移除
28     beforeDestroy() {
29         window.removeEventListener(‘mousewheel‘, this.handleScroll)
30     },
31     methods: {
32         handleScroll(e) {
33            //用来判断滚轮是向上滑动还是向下
34           let direction = e.deltaY>0?‘down‘:‘up‘ 
35           // console.log(direction)
36           let arrList=this.navList
37           //鼠标滚轮向下或后
38           if(direction==‘down‘){
39               if(this.changeActive<arrList.length-1){
40                   
41                   this.changeActive=this.changeActive+1 
42                   //跟随着选项卡而切换，以changeActive作为下标实现路由的path的读取
43                   this.$router.push({
44                     path:arrList[this.changeActive].path
45                   })
46               }
47           }else{//向上或前
48               if(this.changeActive>0){
49                   this.changeActive=this.changeActive-1
50                   this.$router.push({
51                     path:arrList[this.changeActive].path
52                   })
53               }
54           }
55         }
56     }
57 }