如何在 Shopify 上添加 wow.js/animate.css？答案

【问题标题】：How to add wow.js/animate.css on Shopify?如何在 Shopify 上添加 wow.js/animate.css？
【发布时间】：2020-08-28 01:05:58
【问题描述】：

我正在创建 Shopify 商店，并希望超越主题所提供的内容。具体来说，我正在尝试添加wow.js 和animate.css。

如下所示，我在template.liquid 的head 标记中添加了 Animate.css 的 CDN。

接下来我为 Wow.js 添加了 CND 并激活如下：

似乎可以很好地加载脚本，甚至在滚动到元素时添加 animated 类，但由于某种原因，没有发生任何动画。

非常感谢任何有助于缓解此问题的意见！

【问题讨论】：

【解决方案1】：

您的主题的 CSS 可能会覆盖 animate.min.css，因为它是在它之前加载的。尝试最后加载 animate.min.css，就在结束 </head> 标记之前

【讨论】：

【解决方案2】：

这真是太烦人了。无论如何，现在引用/激活 Animation.css 动画的方式似乎是使用 animate__animated 类，而不仅仅是像以前那样使用 animated。

这意味着当初始化 wow.js 时，必须将 animationClass 更改为 animate__animated，如下所示：

new WOW({
  animateClass: 'animate__animated', // --> WOW default is animated but that does not work anymore
  }).init();

Animation.css 动画必须是这样的：

&lt;div class="wow animate__fadeInUp"&gt;Lorem&lt;/div&gt;

【讨论】：