时间戳

首页 > 解决方案 > 当项目进入 wow.js 视图时尝试添加类

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

问题描述

当项目进入视图时，我正在尝试添加一个类

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

标签： javascripthtmlcsswow.js

解决方案

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

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

因此，我将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>

推荐阅读