关于wow.js在vue项目中的使用及遇到的坑

最新推荐文章于 2024-07-25 17:03:07 发布

just_wq

最新推荐文章于 2024-07-25 17:03:07 发布

阅读量5.1k

点赞数 10

分类专栏：前端小白的进阶之路文章标签： vue.js

本文链接：https://blog.csdn.net/just_wq/article/details/107021835

版权

本文介绍了在Vue项目中使用wow.js实现滚动加载动画的步骤，包括安装、引入和初始化。在使用过程中遇到动画无效和延迟执行的问题，原因是引用了不同版本的animate.css导致类名不匹配。解决方案是正确引用对应的animate.css，并注意类名前缀以避免延迟显示的bug。

摘要由CSDN通过智能技术生成

第一次使用wow.js实现页面滚动加载动画。使用过程中主要遇到了两个问题：1. 动画效果无效（后来发现是引用的动画类名问题）2. 设置动画延迟执行遇到会先显示再延迟执行进入效果的问题。也是由于错误使用了动画类名。所以记录一下~

在vue项目中的使用

1. 安装

npm install wowjs --save

(animate.css会被自动安装，但是这里有坑)

2. 在main.js中引入animate.css

引入时需要注意看是引入的哪个animate.css文件，在后面有详细讲解。

3. 引入wow.js并初始化

这里方法有二

方法1

在main.js中添加

import wow from 'wowjs'

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

just_wq

关注关注

10
点赞
踩
20

收藏

觉得还不错? 一键收藏
8
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【vue】用WOW.js+animate.css实现页面滚动加载元素动画

hello world_

12-15

4283

一、场景在很多的网站中，我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的，这样看起来页面更具有活力，增加用户体验。当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的距离自己写一些动画来实现，但是当页面的动画元素过多的时候，难免有点繁琐，所以本篇博客介绍使用 WOW.js 和 animate.css 来实现页面滚动加载元素动画二、引入和使用引入和使用分为...

页面加载时模块移入动画---wow

weixin_38797742的博客

12-10

661

1，在头部引用animate.css <link rel="stylesheet" href="animate.css"> 2，body底部引入wow.js 且初始化一下 <script src="js/wow.min.js"></script> <script> new WOW().init(); </script> 配置属性/方法类型默认值说明 boxClass 字符串 ‘wow’ 需要执行动画的元素的 class animate

8 条评论您还未登录，请先登录后发表或查看评论

vue3 项目中使用wow.js和animate.css

最新发布

weixin_42766526的博客

07-25

458

vue3 项目中使用wow.js和animate.css

在VUE中使用wow.js

宇智波带土

12-19

1474

在VUE中使用wow.js

vue中使用wow.js

qq_42717015的博客

09-05

2302

wow.js 页面效果插件使用！wow.js 页面效果插件使用！Reveal Animations When You Scroll. Very Animate.css Friend :-) Easily customize animation settings: style, delay, length, offset, iterations... 100% MIT Licensed, not GPL. Keep your code yours. ES2015+, naturally Caffeine

Vue-wowjs

lihui61357457的博客

09-26

815

WOW.js 实现了在网页滚动时的动画效果，可以让你的页面更有趣，比如页面在向下滚动的时候，让一些元素产生动画效果，吸引用户的注意。这里会自动安装animate.css。

vue使用wow.js (实现页面元素动画)

潜心

12-06

1726

wow.js：让页面滚动更有趣 wow.js 基于animate.css 下面记录在vue中正确使用的步骤。自己踩坑，我在参照其他博客内容进行使用时，没有成功引用，经过多次尝试，得到了正确使用的方法。 1、安装wow.js cnpm i wowjs --save 2、main.js引入相关依赖 import { WOW } from 'wowjs' import animated from 'wowjs/css/libs/animate.css' //这里需要将样式用起来， Vue.use(an

在Vue中使用wowjs以及遇到的问题

LaoQI_的博客

05-06

559

在Vue中使用wowjs以及遇到的问题下载： npm npm install wowjs animate.min.css下载地址：https://www.dowebok.com/131.html 下载完成后得到下面的文件夹↓ 在main.js中引入： import Wow from 'wowjs' import './css/animate.min.css' Vue.prototype.$wow=Wow 这里需要单另copy并引入animate.min.css 否则wowjs不会生效接下来在

vue中swiper初始化问题_vue中使用vue-awesome-swiper遇到的一些问题

weixin_33520865的博客

02-05

3204

最近开发pc官网，用到了轮播图，在这里记录一下使用过程中遇到的问题。之前用jquery开发项目的时候，用的是swiper3。现在用vue开发，我一开始尝试用了最新的swiper6，我把官网的demo里的代码复制过来，结果发现要不是下标小圆点失效，要不就是切换功能失效，不知道问题出在哪里。搞了很久，最后用了swiper3的使用方法。轮播图引入的版本是"vue-awesome-swiper": "^2...

vue中使用swiper页面不滑动，swiper中的js不生效的问题解决

吴文静的博客

05-19

3526

如何在vue中使用swiper插件 1、前言今天用vue3.0写项目的时候，想要用swiper插件做轮播。其实之前我也用过，也遇到这个问题，但是我记性不好，就把这个关键的问题又忘记啦，今天又遇到这个坑，所以打算记录一下，以免自己以后又忘记。我们在vue中使用swiper的时候，一定要用setTimeout来初始化swiper组件。这也是我们经常遇到的一个坑。如果用的轮播比较简单，其实elementUI里面自带的走马灯也是不错的选择。 2 、安装方法 // 使用指令安装 npm i swiper@3.4.

使用vue二次开发海康监控H5视频播放

Kepler_明的博客

06-09

6979

使用vue二次开发海康监控H5视频播放西瓜播放器示例demo阿里云的示例demo使用海康的H5视频开发包，海康的api页面中的使用第一步第二步第三步第四步切记bug 由于公司项目需要做监控的直播跟回放，所以接触到了这个海康的监控视频播放，本来是打算使用videojs使用rtmp流进行监控的直播，因为现在主流浏览器都不支持flash插件，而videojs使用rtmp流直播的话需要浏览器支持flash，所以果断放弃，后来决定使用hls协议调用H5播放器进行播放。然后当时找了两个H5播放器一个是西瓜播放器，另一个

vue使用wow.js

牵着蜗牛去旅行的博客

10-11

411

先安装 npm install wowjs --save-dev 注意："animate.css"版本要选择: "^3.7.2 要不然动画不显示然后再main.js import 'animate.css' import {WOW} from 'wowjs' Vue.prototype.$wow = new WOW({ boxClass: 'wow', // default animateClass: 'animated', // default offset: 150, // defau

wow.js vue项目的使用

m0_46415203的博客

12-31

696

wow.js，让页面动起来

vue中wowjs的使用

weixin_30435261的博客

07-29

311

笔者亲测，在vue中使用wow.js如果不按照以下方法实施，会出现意想不到的BUG,网页刷新后图片就全部突然看不到了，被增加了一个隐藏属性，建议大家严格按照方法执行，不要随意使用（1）通过npm安装： npm install wowjs --save-dev animate.css会自动安装。（2）在main.js中引入animate.css import 'animate.css'...

wowjs 在vue中使用

qq_40194097的博客

06-16

421

之前使用wowjs只能刷新页面才会有动画，点击路由跳转无动画存在问题，这次解决了此问题过来记录一下。 1.cnpm install wowjs --save-dev animate.css会自动安装。 2.main.js 引入 import ‘wowjs/css/libs/animate.css’ 3.组件使用 1. import { WOW } from 'wowjs' 2. mounted() { var wow = new WOW({ boxClass: 'wow'

vue中使用wow.js需要滚动才会触发动画，想要一加载就触发动画

weixin_59803648的博客

05-22

210

既然它不滚动，我们就让它自己滚动去触发动画，页面滚动1px也不会造成什么影响。页面挂载后不滚动，页面内容就空白，体验感很差。

vue中引入及使用wow.js

weixin_45264424的博客

01-07

1892

安装 npm install animate.css --save npm install wowjs --save main.js全局引入 import "animate.css" import "wowjs/css/libs/animate.css"// 巨坑... 此地方要引入两个css import wow from 'wowjs' Vue.prototype.$wow = wow 在相应的组件中使用 <div class="container"> <.

Vue.js中图标组件使用详解及三种API对比

在Vue.js中使用图标组件是一项常见的任务，特别是在构建交互式界面时。本文将深入探讨三种主要的API实现方法，帮助Vue开发者更好地集成和管理图标。首先，我们来看第一种方式，即使用单一组件如 `<v-icon>`，这个...