本地IDE运行WOW.js时间轴动画需引入的头部依赖说明

WOW is not defined 属于典型的依赖未引入错误：Codepen平台会自动注入项目配置面板中勾选的所有外部库，代码迁移到本地环境后如果没有手动引入对应依赖，浏览器找不到WOW全局对象就会抛出该错误，连带导致滚动入场动画、jQuery交互逻辑全部失效。

注意引入顺序不能调换，否则会出现依赖加载顺序错误导致的失效问题：

• 首先引入WOW.js依赖的动画样式库Animate.css，所有滚动入场动画效果都基于该样式库实现：

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

• 其次引入jQuery库，你代码中编写的作者头像悬停弹窗交互依赖jQuery运行，必须放在自定义JS逻辑之前加载：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

• 最后引入WOW.js核心库文件，必须在new WOW().init()初始化代码之前加载，否则就会触发未定义报错：

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

• 你自己编写的业务代码（WOW实例初始化、jQuery交互逻辑），要放在上述三个依赖的引入标签之后
• 稳妥起见可以把自定义JS逻辑放在DOM加载完成的回调里执行，避免DOM未渲染完成就初始化导致的效果失效，参考写法：

$(document).ready(function() {
  // WOW实例初始化
  new WOW().init();
  // 作者头像悬停弹窗的交互逻辑统一写在这里
})

• 如果需要离线本地运行，可以把上述三个资源文件下载到本地项目目录，将src/href属性替换为本地相对路径即可，无需依赖公网CDN。

内容的提问来源于stack exchange，提问作者HelloWorld