1、背景
想要做一个酷炫的公司简介，使用一个长图介绍，可以一边滚动一边动态展示动画，让静态的页面看起来非常灵动。
2、技术路径
3、具体实现
(1)安装插件
npm install wow.js --save
npm install animate.css --save
注意：安装时候版本有依赖，验证下来 "animate.css": "3.5"和"wowjs": "^1.1.3"是生效的。
（2）全局注册
import 'animate.css'
import WOW from 'wowjs'
// 添加 WOW 实例到全局属性
app.config.globalProperties.$wow = new WOW.WOW({
boxClass: 'wow', // 默认类名
animateClass: 'animated', // 默认动画类名前缀
offset: 100, // 距离视口多少像素时触发
mobile: true, // 是否在移动设备上启用
live: true , // 对异步加载的内容是否有效
})
(3)页面引入和使用
初始化
export default {
name: "Index",
data() {
isLoading: true
},
created() {
},
mounted() {
this.$wow.init()
},
methods: {}
}
在元素上直接写动画效果
<template>
<div>
<transition name="fade" @after-leave="onLoadingComplete" >
<div id="loading" v-if="isLoading">
<img src="../../assets/images/Galaxy/logo.png" alt="" class="loading-logo" />
<div class="progress-box">
<div class="progress"></div>
</div>
</div>
</transition>
<div v-show="!isLoading">
<div class="zeroBgs">
....
</div>
<div class="oneBgs">
<img src="../../assets/images/1-li1.png" data-wow-delay="0.1s" data-wow-offset="50" class="img-1-li1 wow fadeInRight" />
<img src="../../assets/images/1-li2.png" data-wow-delay="0.1s" data-wow-offset="50" class="img-1-li2 wow fadeInLeft" />
<img src="../../assets/images/1-li3.png" data-wow-delay="0.1s" data-wow-offset="50" class="img-1-li3 wow fadeInRight" />
....
</div>
...
</div>
</div>
</template>
自定义样式
// 首屏加载
#loading {
width: 100%;
height: 100vh;
background-color: #fff;
background-image: linear-gradient(180deg, #E7EBEE 0%, #FFFFFF 31%, #CDDFEA 100%);
background-size: 100% 100%;
background-repeat: no-repeat;
position: fixed;
left: 0;
top: 0;
z-index: 2;
.loading-logo {
width: 136px;
height: 98px;
position: absolute;
top: 240px;
left: 0;
right: 0;
margin: 0 auto;
animation: doudong 3s ease;
}
.progress-box {
width: 315px;
height: 6px;
background: #E7EBEE;
border-radius: 6px;
position: absolute;
top: 388px;
left: 0;
right: 0;
margin: auto;
overflow: hidden;
.progress {
width: 315px;
height: 6px;
background: #C49A6B;
border-radius: 4px;
animation: toleft 3s forwards;
}
}
}
...
// 关键帧 抖动
@keyframes doudong {
0% {
transform: rotate(-5deg);
transform: scale(1.4);
}
10% {
transform: rotate(5deg);
}
20% {
transform: rotate(-5deg);
}
30% {
transform: rotate(5deg);
}
40% {
transform: rotate(-5deg);
}
50% {
transform: rotate(5deg);
}
60% {
transform: rotate(0deg);
}
100% {
transform: scale(1);
}
}
// 关键帧 从左到右
@keyframes toleft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
具体使用注意事项官网描述比较详细wow.js和animate.css
data-wow-duration： 动画持续时间
data-wow-delay： 动画开始前的延迟
data-wow-offset： 开始动画的距离（与浏览器底部相关）
data-wow-iteration： 动画的次数重复（无限次：infinite）
具体动画效果可以看animate.css
