当项目进入 wow.js 视图时尝试添加类答案

【问题标题】：Trying to add class when the item comes into view with wow.js当项目进入 wow.js 视图时尝试添加类
【发布时间】：2021-04-04 19:46:09
【问题描述】：

我正在尝试在项目出现时添加一个类

但显然，我遗漏了一些使 wow.js 无法工作的东西

这是我尝试过的。

body{
    
    display:flex;
     justify-content:center;
}


.test {
        width: 500px;
        background-color: #000;
        height:250px;
        margin-top:auto;
        color:#ffff;
        padding-top:5%;
        text-align:center;
}

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

                <body> 
                            <div class="test wow bounceInUp">
                                    Content to Reveal Here
                            </div>
                </body> 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
             <script src="js/wow.min.js"></script>
             <script>
              new WOW().init();
            </script>

【问题讨论】：

控制台是否有任何错误？
不，一点也不。

标签： javascript html css wow.js

【解决方案1】：

我尝试编译您的代码，但也没有结果。

但是，在从项目的 GitHub 存储库下载 animate.css 和 wow.min.js 后，我设法让它工作。可能wowjs 与 animate.css

的 4.1.1 版本不兼容

所以，我将 animate.css 和 wow.min.js 保存在与下面的 HTML 和 CSS 代码相同的文件夹中

代码：

body{

    display:flex;
     justify-content:center;
}


.test {
        width: 500px;
        background-color: #000;
        height:250px;
        margin-top:auto;
        color:#ffff;
        padding-top:5%;
        text-align:center;
}

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

<div class="test wow bounceInUp">
  Content to Reveal Here
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
  new WOW().init();
</script>

【讨论】：