时间戳

首页 > 解决方案 > Django 网站 wow.js 和 animate.css 不工作

html - Django 网站 wow.js 和 animate.css 不工作

问题描述

我让 animate.css 工作正常，但是当我将 wow.js 导入我的静态文件夹时，它在滚动或一般情况下不起作用。动画部分只能在没有“哇”类的情况下工作。
由于我的网站是用 django 构建的，我不确定这是否与它有关。这是包含动画和哇文件的代码。

<link rel="stylesheet" href="{% static 'css/animate.css' %}">

这是唯一有效的：

<div class="container">
    <h1 class="animate__animated animate__bounce" style="color:black;">An animated element</h1>

所有这些都不起作用，我不知道我做错了什么：

    </div>
    <div class="container">
    <h1 class="wow animate__bounce" style="color:black;">An animated element</h1>
    </div>
    <div class="container">
    <h1 class="wow bounce" style="color:black;">An animated element</h1>
    </div>
    <div class="wow bounce">
    <h1 class="wow bounce" style="color:black;">An animated element</h1> 
    </div>

I have these loaded in as well:

    <script language="javascript" type="text/javascript" src="{% static 'js/wow.min.js' %}"></script>
    <script>new WOW().init();</script>

我的文件夹层次结构的附加图像

wow.js 在我将容器放在页面上的任何地方都不起作用。所有这些代码都在我的 base.html 文件夹中（请参考所附图片）

这是我的控制台日志：

[19/Jun/2020 17:46:10] "GET /favicon.ico HTTP/1.1" 404 4547
[19/Jun/2020 17:46:20] "GET / HTTP/1.1" 200 7917
[19/Jun/2020 17:46:20] "GET /static/css/master.css HTTP/1.1" 200 
1631
[19/Jun/2020 17:46:20] "GET /static/css/animate.css HTTP/1.1" 200 
95376
[19/Jun/2020 17:46:20] "GET /static/css/blog.css HTTP/1.1" 200 506
[19/Jun/2020 17:46:20] "GET /static/js/wow.min.js HTTP/1.1" 200 8155
[19/Jun/2020 17:46:20] "GET /media/blog_pic/markus-spiske- 
qjnAnF0jIGk-unsplash.jpg HTTP/1.1" 200 634265
[19/Jun/2020 17:46:20] "GET /media/blog_pic/IMG_4779_1s6meGH.jpg 
HTTP/1.1" 200 829413
[19/Jun/2020 17:46:20] "GET /media/blog_pic/kelly-sikkema- 
lJrTJHzQjOs-unsplash.jpg HTTP/1.1" 200 162152
[19/Jun/2020 17:46:20] "GET /static/pictures/linkedin-logo.png 
HTTP/1.1" 200 3346
Not Found: /favicon.ico
[19/Jun/2020 17:46:21] "GET /favicon.ico HTTP/1.1" 404 4547

在我的网站上，它们还包含其他信息（我没有包括，因为它在这个线程上太乱了），但是当“哇”类是否在其中时甚至没有动画。
如果有人可以提供帮助，请告诉我。谢谢

标签： htmldjangocss-animationsanimate.csswow.js

解决方案

我之前有这个花了我一段时间，实际上是浏览器的问题。

通过将 google chrome 更改为开发人员的 google chrome 来解决。

尝试为开发人员下载新的浏览器。

“永远不要同时打开两个浏览器” Gunter O'dimm

推荐阅读