两种方法：
第一种方法：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>
第二种方法：
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>