vue里面animate动画库的使用

y叽里咕噜

已于 2022-09-15 10:47:31 修改

阅读量752

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端

于 2022-09-15 10:41:05 首次发布

本文介绍了如何在Vue项目中安装和使用Animate.css库来添加跨浏览器的CSS动画。首先通过npm安装animate.css，然后在main.js文件中导入。接着，可以从Animate.css的官网选择并复制合适的动画效果应用到Vue组件的class属性中，例如实现元素淡入下落的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先现在vue的终端安装这个animate

npm install animate.css --save

然后在main.js里面引入这个

import 'animate.css'

其次打开animate的官网Animate.css | A cross-browser library of CSS animations.在里面挑选合适的动画

最后把这个选好的复制到代码里面

（此处的goHome是我自己写的类名，然后第二个必须有，第三个就是你选的动画效果的名字，直接在上图的右边点击复制就行）

<div class="goHome animate__animated animate__fadeInDownBig">
        超级无敌想回家
    </div>