Animate.css 在我的 Vue 3 项目中没有动画

Posted 2023-02-22

【中文标题】Animate.css 在我的 Vue 3 项目中没有动画

【英文标题】：Animate.css not animating in my Vue 3 project

【发布时间】：2021-04-14 09:49:44

【问题描述】：

我只是想在我的 Vue 3 应用程序中做一些基本的 html 动画，但 Animate.css 示例不起作用。

具体来说，在使用 npm install animate.css --save 安装动画 css 依赖项后，示例动画代码 <h1 class="animate__animated animate__bounce">An animated element</h1> 在我的页面加载时不会动画。标题呈现，但只是坐在那里，一动不动。

我尝试了其他解决方案，例如changing windows performance、adding animated to the class 等，但都没有成功。

我看到一些解决方案使用 CDN 链接库，但我认为我不应该这样做，因为我使用 npm 安装它。

我做错了什么？

<template>
  <div class="container-fluid" id="app">
    <h1 class="animate__animated animate__bounce" style="color:white">An animated element</h1>
  </div>
</template>

【问题讨论】：

在进行 npm install 之后，您采取了哪些步骤来确保它包含在您的网站 css 文件中？

@JoshuaAngnoe 没有，我没有意识到这是一个要求；只需按照所写的文档进行操作即可。

【参考方案1】：

将 animate.css 导入您的 main.js 文件

import 'animate.css';