第一种方法：

1.引入静态资源包

静态资源包，需要注意的是。必须放到static文件夹下面
在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 

    <title>wq00</title>
    <link rel="shortcut icon" href="#" />
    <link rel="stylesheet" href="./static/animate.css">
    
  </head>
  <body>
    <div id="app"></div>
    <script src="./static/wow.js"></script>
  </body>
</html>

2.需要用到动画的页面：

注意，必须是在mounted钩子函数里面使用，$nextTick后才可以

<template>
  <div>
    <el-button @click="gowx">我要去小程序首页</el-button>
     <h1 class="my-element">An animated element</h1>
     <div style="height: 1200px;"></div>
     <div class="animated wow bounceInLeft  one" ></div>
     <div class="animated wow bounceInRight  two" ></div>
     <div class="animated wow bounceInUp  three2" ></div>
     <div class="animated wow bounceIn  four" ></div>
     <div style="height: 1300px;"></div>

  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      // 在dom渲染完后,再执行动画
      var wow = new WOW({
        live: false
      });
      wow.init();
    });
  },
  methods: {}
};
</script>
<style scope>
.my-element {
  animation: bounceInLeft;
  animation-duration: 2s;
}
.my-element2 {
  animation: rotateInDownLeft;
  animation-duration: 2s;
}
.test {
  background-color: rgba(219, 219, 219, 0.705);
  color: black;
  overflow-x: hidden;
}
.one,.two,.three2,.four {
  width: 200px;
  height: 200px;
}
.one{
  background: red;
}
.two{
  background: green;
}
.three2{
  background: yellow;
}
.four{
  background: blue;
}
</style>

第二种方法：

1.引入animate.css和wow.js

npm i wowjs --save-dev
npm i animate.css -s

"animate.css": "^4.1.1",
"wowjs": "^1.1.3"

2.在main.js文件里面引入

import 'animate.css'

3.需要用到动画的页面：

注意，必须是在mounted钩子函数里面使用，$nextTick后才可以
还要一点就是引入wowjs

<template>
  <div>
    <el-button @click="gowx">我要去小程序首页</el-button>
     <h1 class="my-element">An animated element</h1>
     <div style="height: 1200px;"></div>
     <div class="animated wow bounceInLeft  one" ></div>
     <div class="animated wow bounceInRight  two" ></div>
     <div class="animated wow bounceInUp  three2" ></div>
     <div class="animated wow bounceIn  four" ></div>
     <div style="height: 1300px;"></div>

  </div>
</template>
<script>
import { WOW } from "wowjs";
export default {
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      // 在dom渲染完后,再执行动画
      var wow = new WOW({
        live: false
      });
      wow.init();
    });
  },
  methods: {}
};
</script>
<style scope>
.my-element {
  animation: bounceInLeft;
  animation-duration: 2s;
}
.my-element2 {
  animation: rotateInDownLeft;
  animation-duration: 2s;
}
.test {
  background-color: rgba(219, 219, 219, 0.705);
  color: black;
  overflow-x: hidden;
}
.one,.two,.three2,.four {
  width: 200px;
  height: 200px;
}
.one{
  background: red;
}
.two{
  background: green;
}
.three2{
  background: yellow;
}
.four{
  background: blue;
}
</style>