vue项目中路由切换使用 animate.css 动画库

最新推荐文章于 2024-09-06 16:02:45 发布

原创最新推荐文章于 2024-09-06 16:02:45 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue animate #animate.css

本文介绍如何在Vue项目中使用animate.css库实现路由切换时的动画效果。通过在index.html引入animate.css，结合App.vue中的transition标签和router-view，定义进入和离开的动画样式。利用随机数生成器选择不同的CSS动画，增强用户体验。

vue-cli初始项目，这个不用再详说了吧

在这里插入图片描述

   <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">

我直接在 index.html 中引入 animate.css 库

在 App.vue 中 transition 标签定义好进入、离开的变量 class ，在 router-view 定义好 class animated ， animate.css的用法必须定义calss：animated

<template>
  <div id="app">
    <home :isTop="isTop"></home>

    <div class="routerView">
      <transition :enter-active-class="enterClass" :leave-active-class="leaveClass">
        <router-view class="animated"></router-view>
      </transition>
    </div>

  </div>
</template>

ClassArr 就是保存的 animate.css 的 css动画样式，我这随机选的十几个css样式名

   data() {
      return {
        isTop: false,
        transitionName: 'slide-right',
        enterClass: '',
        leaveClass: '',
        ClassArr: ['rubberBand','pulse','swing','tada','wobble','heartBeat','fadeOut','flipInX','flipInY','flipOutX','flipOutY','rotateIn','rotateOut','rotateOutDownLeft','rotateOutDownRight','rotateOutUpLeft','rotateOutUpRight','hinge','jackInTheBox','rollIn','rollOut']
      }

监听路由变化

watch: {
  $route(to, from) {
    this.leaveClass = this.ClassArr[this.random()];
   setTimeout(()=>{
     this.enterClass = this.ClassArr[this.random()];
   },500)
  }
},

methods方法中定义随机数

random() {
    //定义随机数，对应好 this.ClassArr.length 的长度，我这里 length 是 21
    return Math.floor(Math.random() * (1 - 21) + 21)
  }

接下来，运行去看下路由切换带来的动画效果吧