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

Question

我正在尝试在 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) 中运行。

Answer 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>