javascript 正确配置动画css和wow js后html元素不动画

nbnkbykc  于 2022-12-28  发布在  Java
关注(0)|答案(1)|浏览(258)

链接到我的网站https://travelaja.vercel.app/
我遵循了animate.css和wow.js文档中关于如何配置库以使其工作的说明,并且在最初错误配置脚本之后正确地完成了配置。
我使用CDN添加了animate.css和wow.js,

<link
   rel="stylesheet"
   href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js" integrity="sha512-Eak/29OTpb36LLo2r47IpVzPBLXnAMPAVypbSZiZ4Qkf8p/7S/XRG5xp7OKWPPYfJT6metI+IORkR5G8F900+g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>new WOW().init();</script>

animate.css添加在head标记中,而script标记添加在页面底部。
我使用about-us `` class. When I inspected it, I observed it had the visibility of hidden and then visible when I scrolled to the location with the animated class added and the animated name of slideInLeft '''在section(这是紧接在hero部分之后的第二个)中添加了类名wow slideInLeft,但我遇到的唯一问题是动画本身不可见或没有效果。
我检查了一个GitHub问题,有人建议删除溢出-x:隐藏在身体或HTML,我观察到我有和删除,但问题仍然存在。
我最初面对的是WOW is not defined issue,我通过将脚本放置在页面末尾来修复它,错误就消失了。

dpiehjr4

dpiehjr41#

我是按照“www.example.com“的指示操作https://wowjs.uk/docs.html的,这些类的使用方式非常不同,我改用这个“https://animate.style/“,并添加了wow类,它工作得很好。
旧用法/错误用法的一小段。

<div class="section-1 wow slideInLeft">
    your content
</div>

新/正确用法的片段。

<div class="section-1 wow animate__animated animate__slideInLeft">
    your content
</div>

相关问题