vue 中使用Animate.css 库

申多事儿

于 2021-05-09 20:19:05 发布

阅读量302

点赞数

CC 4.0 BY-SA版权

文章标签： css vue.js javascript

本文链接：https://blog.csdn.net/weixin_46031116/article/details/116569327

本文介绍了如何安装和使用Animate.css动画库，包括通过npm或yarn安装、在Vue项目中引入并应用动画效果的具体步骤。

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

Animate.css 库官网 https://animate.style/

1.安装

npm install animate.css --save
或者 yarn add animate.css

2.引入到main.js

import animated from 'animate.css' 
Vue.use(animated)

3.在需要的页面中使用

<div class=" goodlist animate__animated  animate__backInLeft  " >
 <!-- 第一个类名是容器的类名 第二个 animate__animated  为固定的类名 
 必须要加  第三个animate__backInLeft  是我们在动画库中 选择的效果-->
     <div>内容 盒子</div>  
</div>