animate.css在vue项目中的使用教程
更新时间：2018年08月05日 16:49:03 作者：花落微凉梦清幽
在vue项目中使用动画其实有多种方式，可以使用vue中的过渡transition，可以使用animate动画与transition配合使用，也可以单独使用animate动画库，下面我们开始介绍在vue中单独使用animate动画，感兴趣的朋友一起看看吧
在vue项目中使用动画其实有多种方式，可以使用vue中的过渡transition，可以使用animate动画与transition配合使用，也可以单独使用animate动画库（详情可见vue官网-过渡：过渡），下面我们开始介绍在vue中单独使用animate动画，其实也非常简单，两步留可以实现：
第一步：安装：
在命令行中执行：npm install animate.css --save
第二步：引入及使用：
main.js中：
import animated from 'animate.css' // npm install animate.css --save安装，在引入 Vue.use(animated)
使用：
vue模板中：
<div class="ty"> <!-- 直接使用animated中的动画class名，注意：必须使用animated这个class名，否则动画会无效 --> <div class="box animated bounceInDown"></div> </div>
总结
以上所述是小编给大家介绍的animate.css在vue项目中的使用教程，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
这篇文章主要为大家介绍了vue前端实现打印下载示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
在Vue中,KeepAlive组件是一种特殊的组件,用于缓存已经渲染过的组件实例,本文主要为大家详细介绍了KeepAlive组件的用法,需要的小伙伴可以参考下2023-09-09
如果你也和我一样，按照正常的流程下载并且配置了stylus，但是依旧报错，也许这篇文章就是你的菜，一起来看看吧2022-08-08
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
这篇文章主要介绍了详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
新项目采用 Vue3 作为前端项目框架,避免不了要使用 echarts,但是在使用的时候,出现了与 Vue2 使用不一样的地方,所以特别记下来,希望给到有需要的同学一些帮助2023-10-10
这篇文章主要介绍了vue实现公告栏文字上下滚动效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要介绍了vue 动态组件用法,结合实例形式总结分析了vue 动态组件基本功能、原理、使用方法及操作注意事项,需要的朋友可以参考下2020-03-03
这篇文章主要为大家介绍了Vue3.2 setup语法糖及Hook函数基本使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
antfu大佬的v-lazy-show教我学会了怎么编译模板指令
这篇文章主要介绍了antfu大佬的v-lazy-show,我学会了怎么编译模板指令示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
vue源码学习之Object.defineProperty 对数组监听
这篇文章主要介绍了vue源码学习之Object.defineProperty 对数组监听，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
最新评论