两种方法：
第一种方法：
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();
的参数
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
//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;
}