之前看前端杂志了解到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官网
终于起作用了!!!关于系统设置坑的博客真的是少之又少,这里记录一下。