两种方法：
第一种方法：npm安装包animate.css和wow.js
第二种方法：静态资源的引入
第一种方法：
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>
3.延迟动画 —— wow高级选项
data-wow-duration: 更改动画持续时间，单位秒s
data-wow-delay: 动画开始前的延迟,单位秒s
data-wow-offset: 开始动画的距离（与浏览器底部相关）
data-wow-iteration:动画的次数重复
这写都可以直接添加到标签里设置：
<div class="wow bounceInUp" data-wow-duration='1s' data-wow-delay="1s" data-wow-offset="10" data-wow-iteratio="10">动画的内容</div>
第二种方法：
1.引入animate.css和wow.js
这里要注意的是：我之前就是在官网下载的animate.css的最新版本，然后网上找了各种方法都没法实现效果，后面才知道是版本的坑，所以这里如果要实现滚动效果，需要指定下版本。
npm i wowjs --save-dev
npm i animate.css -s
"animate.css": "^3.7.2","wowjs": "^1.1.3"
2.在main.js文件里面引入
import 'animate.css/animate.min.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="wow bounceInUp one" data-wow-duration="1s" data-wow-delay="0.4s"></div><div class="wow slideInLeft two" data-wow-duration="1s" data-wow-delay="0.4s"></div><div class="wow bounceInUp yellow" data-wow-duration="1s" data-wow-delay="0.4s">333</div><div class="wow bounceIn four" data-wow-duration="1s" data-wow-delay="0.4s"></div><div style="height: 1300px;"></div></div></template><script>import WOW from "../../node_modules/wowjs/dist/wow";export default {data() {return {};},mounted() {let wow = new WOW.WOW({boxClass: "wow",animateClass: "animated",offset: 0,mobile: true,live: true});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,.yellow,.four {width: 200px;height: 200px;}.one {background: red;}.two {background: green;}.yellow {background: yellow;}.four {background: blue;}</style>
4.注意
1）wow.init();的参数
mounted() {let wow = new WOW.WOW({boxClass: "wow",animateClass: "animated",offset: 0,mobile: true,live: true});wow.init();}
2）data-wow-duration与data-wow-delay表示的含义
//data-wow-duration 代表的执行动画的时间长短，时间越长代表越慢，反之亦然，
//data-wow-delay 代表延迟多久执行该动画，适用于多个模块不同时间执行动画。
//这里出现的class中第一个wow一定要保证跟上一步设置的boxClass名字一致哦！
打字的动态效果
<p class="hel">这里即将展现本页面的所有的目录和链接地址</p>
@keyframes typing {from {width: 0}}@keyframes blink-caret {50% {border-color: transparent; }}.hel{margin-left: 50px;color: #ffffff;/* monospace:等宽字体仅针对西文字体。由于英文字母的宽度各不相同，导致编程时代码排版很难看 */font: 200% monospace;border-right: .08em solid;width: 40ch;white-space: nowrap;overflow: hidden;animation: typing 10s steps(20, end),blink-caret .5s step-end infinite alternate;}
