Animate.css 似乎不适用于 Chrome 和 FF 中的 Laravel 7.10.3

【问题标题】：Animate.css does not seem to work with Laravel 7.10.3 in Chrome and FFAnimate.css 似乎不适用于 Chrome 和 FF 中的 Laravel 7.10.3
【发布时间】：2020-05-08 16:52:06
【问题描述】：

我正在尝试在我的 Laravel 项目中使用 Animate.css。我使用以下命令安装了 Animate.css：

npm install animate.css --save

我将它包含在 \resources\sass\app.scss 文件中：

@import "~animate.css/animate.css";

然后我运行以下 npm 命令将其编译为 app.css：

npm run dev

当我在浏览器中查看页面源时，animate.css 似乎包含在内，但 HTML 元素没有动画。动画似乎在 Edge 中有效，但在 Chrome (v81.0.4044.138) 或 FF (v76.0) 中无效。

【问题讨论】：

查看最新的文档。他们从最新版本开始更改了类结构。也许这就是问题所在。 animate.style/#migration
感谢您的评论，最新文档帮助解决了这个问题

标签： laravel laravel-7 animate.css

【解决方案1】：

您可能忘记了 JavaScript，或者没有正确配置。首先，安装 animate.css。

npm i animate.css --save

在 bootstrap.js 中，添加'animate.css'。

window.Popper = require('@popperjs/core').default;
window.$ = window.jQuery = require('jquery');
window.animate = require('animate.css');

在 app.scss 中：

@import "~animate.css/animate";

创建可用于生产的构建。

npm run prod

然后确保您使用的是正确的文件。

<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<script src="{{ mix('js/app.js') }}"></script>

【讨论】：

非常感谢 Karl 提供的这些信息，它对我的新 Laravel 项目很有帮助。
仅供参考，请检查更改版本。