尝试在 wow.js 项出现时添加 class

Question

我正尝试在项目出现时添加 class

但显然，我遗漏了一些导致 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>

Answer 1

我试过编译你的代码，但也没有结果。

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

的 4.1.1 版本不兼容

所以，我将 animate.css and 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>

尝试在 wow.js 项出现时添加 class

Trying to add class when the item comes into view with wow.js

javascript

html

css

wow.js