【踩坑笔记】animate.css无效【非版本问题】

之前看前端杂志了解到animate.css动画库，于是决定去学习一下。谁知道遇到了非常多的坑，也很少有博客记录了我这种问题，在此留下笔记，希望能帮到遇到同样问题的人。

初识

首先是animate.css官网。
不知道你们进去是怎么样的，反正我第一次进去后发现页面的动画效果全部都失效，点右边的什么东西都没有作用。起初我还以为是官网的bug，通过百度去找了其他的效果展示网站来代替，就像这个www.dowebok.com。
那时候的我天真的以为这是什么官网的bug，导致官网效果展示不出来。这也导致了我后面学习的巨坑。

尝试

ok，这就开始了我的学习踩坑之旅，通过npm下载了默认的4.1.1版本的animate.css，然后学着别的教程一样引用类：

<div class="animated bounce">animated</div>

嗯？怎么并没有作用呢？不是说好的一加上，刷新页面就出来效果的吗？后来查看官网，发现好像是新版的类名便利，ok，兴冲冲的改成这样：

<div class="animate__animated animate__bounce">animated</div>

刷新，没用。
刷新，没用。
刷新，没用。
嗯？怎么还是不对，然后我又不知在什么博客上看到了说一定要通过js动态加载类才能起作用，于是：

<div id="test" class="animate__animated">animated</div>
// js中
 let sto = setTimeout(() => {
 	$('#test').addClass('animate__bounce');
    clearTimeout(sto)
 }, 1000)

大声告诉我，结果是什么~
没错，当然还是失败。这时候我已经开始怀疑自己了，然后我就从之前的代替网站上把源码下载了下来，然后发现这个里面的版本是animate.css3.1.1。

难道是版本的问题？于是我就开始丧心病狂的一个个版本实验。果然，功夫不负有心人，我遇到了分水岭——3.6.1和3.7.0，往前能用，往后就无效了。

再对比两个版本，发现从3.7.0往后加入了动画延时，也就是delay的概念，难道从这个版本开始就有bug了？不对啊，用的人这么多，不应该只有我有这个问题啊。万能的度娘也都是一些类名不对之类的额教程。

解决

折腾了3天，最后的最后，发现了问题所在——系统设置。（一口老血）
万万没想到，居然是这个地方的设置没有开启，导致了动画失效。这时候再去访问animate.css官网
终于起作用了！！！关于系统设置坑的博客真的是少之又少，这里记录一下。