使用 Lottie 和 wordpress 在悬停时触发动画答案

【问题标题】：Trigger animation on hover with Lottie and wordpress使用 Lottie 和 wordpress 在悬停时触发动画
【发布时间】：2020-07-18 21:05:02
【问题描述】：

我目前正在用 wordpress（使用 elementor）构建一个需要动画的网站。我想使用 Lottie 来执行此操作，因为我喜欢它的可能性，但我只能通过获取短代码并将其放在 elementor 中的“HTML 代码”块中来让 Lottie 使用插件 WP Bodymovin。但我希望在鼠标悬停时触发动画，这似乎可以通过这个插件“Animentor – Lottie & Bodymovin widget for Elementor”来实现。但是当我通过 elementor 中的“Animentor”小部件上传我的 .JSON 文件时，什么都没有出现。希望任何人对如何使用它有一些指导，因为我已经在不同的计算机和不同的浏览器上进行了测试，并确保该插件与最新版本的 elementor 兼容。谢谢你的时间。

【问题讨论】：

不知道这存在 - 很有趣。无论如何，如果您使用此小部件，您似乎不需要 WP Bodymovin。可能他们是矛盾的。您可能需要检查控制台是否有错误和代码的页面源代码。
嗯，进一步研究问题，我发现控制台中有一条错误消息似乎阻止了它。这是我得到的错误代码“已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' 标头。”
这肯定会导致问题。我没有使用插件，所以我不知道它是如何设置的 - 从外部加载 Lottie 文件？ CORS 策略错误通常与缓存和/或 CDN 设置有关。
它从 wordpress 媒体库加载 Lottie 文件 - 但被拒绝。我会更新我找到解决办法。

标签： wordpress animation plugins elementor lottie

【解决方案1】：

Animentor 使用 WordPress 媒体库来管理您上传的 .json 文件，因此它们应该是从同一个域加载的。

正如@CK MacLeod 正确指出的那样，CORS 错误通常表明缓存和/或您的 CDN 存在问题。

您可以尝试暂时禁用您可能已安装的任何缓存或 CDN 插件，以便确定是哪一个导致了问题。

或者，您也可以尝试在您的 .htaccess 文件中设置 Access-Control-Allow-Origin 标头：

<FilesMatch ".json">
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>

如果您认为这是Animentor的问题，请open an issue on its GitHub repository。

^{免责声明：我是“Animentor – Elementor 的 Lottie & Bodymovin 小部件”的开发者。}

【讨论】：