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";

创建 production-ready 构建。

npm run prod

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

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

Animate.css does not seem to work with Laravel 7.10.3 in Chrome and FF