Vue3使用 wow让页面滚动变得酷炫

A公子是我偶像

已于 2023-03-29 08:30:17 修改

阅读量923

点赞数

分类专栏：前端框架系列文章标签： javascript 前端 vue.js

于 2023-03-27 18:01:52 首次发布

本文链接：https://blog.youkuaiyun.com/liyu_ya/article/details/129800365

版权

前端框架系列专栏收录该内容

10 篇文章

订阅专栏

本文介绍了在Vue3项目中如何解决与Wowjs的兼容问题，通过配置环境，引入animate.css样式，以及在main.ts中初始化Wow对象，实现页面元素的滑入动画。还提到了通过data属性自定义动画参数，如duration、delay和offset。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个东西不难，麻烦的是0-1 各种问题，各种报错，所以我打算记录一下

首先申明；我是vue3中不能使用wowjs ，会有问题， vue3要使用wow.js 库来实现，两个是一个东西

wow是基于animate做的，所以需要的动画，可以自己去官网找

animate 官网

1. 配置环境

npm i wow.js

2. 使用

首先我们在main.ts 中引入样式

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// wow 样式
import 'wow.js/css/libs/animate.css'

createApp(App).mount('#app')

接下来我们实现一个简单的页面引入并使用即可加类型就可以直接使用动画



<template>
  <div class="item wow slideInLeft">1</div>
  <div class="item wow slideInLeft">2</div>
  <div class="item wow slideInLeft">3</div>
  <div class="item wow slideInLeft">4</div>
  <div class="item wow slideInLeft">5</div>
  <div class="item wow slideInLeft">6</div>
  <div class="item wow slideInLeft">7</div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import WOW from "wow.js";

onMounted(async () => {
  let wow = new WOW({
    boxClass: 'wow',    //需要执行动画元素的Class
	animateClass: 'animated',    //animation.css动画的Class
	offset: 0,    //距离可视区域多少开始执行动画
	mobile: true，    //是否在移动设备执行动画
	live: true    //异步加载的内容是否有效
  });
  wow.init();
});
</script>
<style scoped>
.item {
  width: 200px;
  height: 500px;
  background-color: rgb(228, 175, 175);
  margin: 200px;
}
</style>

三个属性

data-wow-duration：更改动画持续时间 data-wow-delay：动画开始前的延迟

data-wow-offset：开始动画的距离（与浏览器底部相关）

data-wow-iteration：动画的次数重复（无限次：infinite）

使用直接写在标签商就可以

    <div class="item wow slideInLeft" data-wow-duration="10">7</div>

效果图

好了，到这就完结了，更多动画可以查看官网