踩坑wow.js 和animate.css一起使用没有效果

于 2024-02-28 13:11:06 发布
阅读量730 收藏 7
点赞数 7
分类专栏： 前端 文章标签： javascript css 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76809965/article/details/136343508
版权
文章讨论了在使用wow.js和animate.css时遇到的问题，包括电脑系统配置需启用窗口动画和元素，以及发现最新版本（4.4.1）不兼容，降级到3.3.1版本后动画效果恢复正常。
摘要由CSDN通过智能技术生成

踩坑wow.js 和animate.css一起使用没有效果

问题及解决方法

一、电脑系统配置问题

在系统属性里面把窗口内的动画和元素勾选
在这里插入图片描述

二、版本问题

使用wow加animate4.4.1也就是最新本，打开网页没有任何动画效果
但是把animate版本切换成3.3.1就可以正常显示动画了

亦简_yz
关注
  • 7
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
wow.js使用和动画只执行一次问题优化
08-30
wow.js使用和动画只执行一次问题优化
Vue+wow.js+animate.css实现动画效果
最新发布
oneya1的博客
03-14 1072
Wow.js 是一个轻量级的 JavaScript 库，用于在网页滚动时实现动画效果。基于 CSS3 的动画库 Animate.css，并通过触发 CSS 动画类来创建各种引人注目的过渡和动画效果。使用 Wow.js，可以很容易地为网页中的元素添加动画效果，比如淡入、滑入、缩放等。当用户滚动到指定位置时，Wow.js会自动触发相应的动画效果，为用户提供更加流畅和有趣的浏览体验。Wow.js 的优点在于简单易用，只需几行代码即可实现各种动画效果，并且支持自定义动画样式和回调函数。
vue中使用wow.js动画效果 不生效，鼠标滚动出现空白
一只如履薄冰的程序猿
06-22 3675
vue中怎么用wow.js，我这就不再赘述了，网上帖子一大堆，我只说遇到的问题和解决办法 项目整体情况vue2+element 先阐述bug现象 wowjs在vue项目中使用有个奇葩的现象，就是只有网页第一屏的动画可以显示，鼠标往下滚动不仅动画没出来，就连原来的html元素也没有显示出来成了一片空白。。。 经过多次实验和翻阅源码明白了其中的道理， 问题出现了node_moduleswowjs/dist/wowjs.js这个源文件里 源代码491-499行如下（具体行数可能有出入），主要...
wow.js animate.css——有趣的页面滚动动画
lumot的博客
09-04 281
今天偶然间发现了一个使用特别简单的页面动画效果，还挺不错的，玩了一个上午，现在介绍一下这个滚动动画： 一、使用方法： 1.下载animate.css 2.下载wow.js 3.引用文件，像这样： ...
WOW.js配合animate.css实现网页滚动加载的动画
果冻
02-02 715
此文介绍WOW.js配合animate.css做网页滚动加载的动画的用法。 下面是会用到的官网地址和下载地址，第一次用的时候找不到下载地址，这边以及记录下来。 1、点击查看WOW.js官网滚动加载动画演示 2、点击去WOW.js官网 3、点击去animate.css官网 4、点击去WOW.js文件下载地址 5、点击去animate.css下载地址 开始之前先按照第点击上面WOW.js和animate.css的下载地址，去下载animate.css和wow.js文件 1、在需要使用滚动加载动画的页面引入ani
animate.css 没有反应的总结
Mr. Ding的小博客
11-15 5257
前言：animate.css没反应多半的版本问题 昨天 在vue3中正常的安装使用animate.css， cnpm install animate.css --save 引入 import animated from 'animate.css' Vue.use(animated) 使用 <transition name="fade" enter-active-class="animated bounce"
wow.min.js和animate.css
04-20
"wow.min.js" 和 "animate.css" 是两个非常有用的工具，它们共同为网页添加了丰富的CSS3动画效果。接下来，我们将深入探讨这两个组件的工作原理、如何使用以及它们在网页设计中的应用。 首先，"wow.min.js" 是一个...
fullpage.js结合animate.css实现滚屏动画
06-11
fullpage.js结合animate.css实现滚屏动画，每段代码都加有详细注释 文章地址：https://blog.csdn.net/cplvfx/article/details/80649574
滚动页面动画文件 wow.js animate.css
08-22
1：网站页面滚动效果文件分为两个分别是：1、单页面如何使用 2、 vue中如何使用使用 2：文件包括animate.css 和 wow.js 3：点击dome.html直接运行 4：css动画基于animate.css的样式，当然也可以自己写@keyframes
vue过渡和animate.css结合使用详解
08-30
Vue 过渡和 Animate.css 结合使用详解 Vue 过渡 在 Vue 中，过渡（Transition）是一种特殊的效果，用于在元素显示或隐藏时产生动画效果。Vue 提供了两种形式的过渡：离开过渡（Leave Transition）和进入过渡...
vue.js动画需要的animate.css和velocity.js
01-07
结合 Vue.js、Animate.css 和 Velocity.js，开发者可以创建出富有动态效果的用户界面。Animate.css 提供了即用型的CSS动画，而Velocity.js 则提供更底层的JavaScript动画控制。两者各有优势，可以根据项目需求和...
animation.css无法显示动画效果问题解决
WHY的博客
07-13 2070
微信小程序中使用animation.css时出现动画效果无法显示的问题，但在真机调试中正常，是由于电脑设置的问题导致的
Animate.css动画库搭配WOW.js 实现页面动画效果（五毛钱特效网站）
weixin_44409748的博客
05-30 443
有的页面在向下滚动的时候，有些元素会产生细小的动画效果。比如需要做到滚动条滑到某个位置时，才能显示动画。wow.js 依赖animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。Animate中文网 – Animate安装、Animate使用、Animate下载animate.css动画演示_dowebokanimate.css (v4.1.1) - animate.css 包含了一组炫酷、有趣、跨浏览器的动画，可以在你的项目中直接使用。
animate.css动画库+wow.js实现滚动到可视区域显示动画
CHENC0518的博客
06-05 852
animate.css动画库+wow.js实现滚动到可视区域显示动画
WOW.js+animate.css让页面滚动时显示动画，使页面更有趣
热门推荐
linda_417的博客
07-07 1万+
官网：http://mynameismatthieu.com/WOW/ bootstrap CDN服务：http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画效果，有漂亮的动画效果，依赖于Animate.css。 2.Animate.css 非常优秀的CSS3动画库，不依赖于jQuery，纯CSS动画 使用方法 1、引
WOW.js和animate.css让页面滚动时显示动画
SamPHP的博客
03-27 941
官网：http://mynameismatthieu.com/WOW/bootstrap CDN服务：http://www.bootcdn.cn/wow/1.wow.js实现了在网页滚动时的动画效果，有漂亮的动画效果，依赖于Animate.css。2.Animate.css (下载https://daneden.github.io/animate.css/)非常优秀的CSS3动画库，不依赖于jQu...
animate.css+wow.js实现页面动画以及滚动到指定位置执行动画
weixin_46189958的博客
04-26 1928
添加一个淡入效果animate__animated是每个必须加的类animate__fadeIn是动画名称可以在官网去看示例直接复制就可以animate__是前缀fadeIn是动画名称，官网复制后会自动复制上前缀。使用wow.js设置动画持续时间为2秒加上wow类名实现当页面滑动到某一元素时动画在执行，就不用去监听滚动条等等一系列东西了，直接加上wow类名就可以。注册wow wow可以直接控制animate.css的动画延迟时间，或者动画持续时间等等。data-wow-delay：动画开始前的延迟。
WOW.js添加动画遇到的问题
weixin_43666952的博客
11-10 252
然后在想要添加动画的元素上添加类名 wow animate_animated animate_fadeInUp 等操作，这里呢如果使用的是animaite.css就需要引入下缀，在 new WOW()有一个option可以设置自行百度。近期的工作是对公司门户类首页进行一次改版，参照竞品可以看到随着鼠标的滚动，各个元素有一个很美的入场动画，之前对animation以及animate.css有过一定的了解，但是在随着滚动加入动画还是一点头绪 没有。也在竞品的样式类中发现有wow类名。经过设置动画完美添加!
wow.js+animate.css+vue实现显示时执行动画
qq_38210427的博客
05-05 347
在需要动画的元素上面加上类名 wow 和 animation.css 动画的 class 即可，还可以加上 data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和 data-wow-iteration（动画执行次数）这四个属性可选可不选。npm 安装 wow.js，安装后 animate.css 会自动安装。wow.js+animate.css+vue实现显示时执行动画。
Vue3使用wow.js动画库
05-20
要在Vue3中使用wow.js动画库，您可以按照以下步骤： 1. 安装wow.js和animate.css库： ``` npm install wow.js animate.css --save ``` 2. 在您的Vue组件中引入wow.js和animate.css： ```javascript import WOW from 'wow.js' import 'animate.css' ``` 3. 在组件的mounted()生命周期函数中初始化wow.js： ```javascript mounted() { new WOW().init() } ``` 4. 在您的HTML元素上添加wow和animate.css类名： ```html <div class="wow animate__animated animate__bounceInLeft">Hello World!</div> ``` 5. 最后，在您的CSS文件中定义使用的动画效果： ```css .wow { visibility: hidden; } ``` 这样就可以在Vue3中使用wow.js动画库了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

亦简_yz

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值