animate.css在vue项目中的使用教程
2018-08-05 16:49
746 查看
在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中使用animate.css
- vue和animate.css怎么结合使用
- vue过渡和animate.css结合使用详解
- vue 和animate.css 的动画使用
- vue项目国际化vue-i18n的安装使用教程
- 使用vue-cli创建项目的图文教程(新手入门篇)
- vue过渡和animate.css结合使用
- vue 和animate.css动画使用
- vue2.0使用animate.css动画,transition&transition-group
- vue2.0 使用vue-cli搭建的项目如何在index.html里引入静态css和js
- Vue自定义动画和animate.css使用
- 使用vue-cli搭建vue项目简单教程
- 在vue中使用animate.css
- 使用pm2启动Node和Vue项目教程
- vue项目实践教程2:使用vux设计登录注册,并讲解vue路由,切换页面标题等内容
- vue-cli的使用,创建项目,教程,上手,vue脚手架的使用
- iPhone项目中使用OpenCV教程
- Adobe Flex迷你教程 -- 合理使用Module分割项目以及对Module的使用[关于接口]
- [转]iphone项目中使用opencv教程
- Google Code项目代码托管网站上Git版本控制系统使用简明教程