animate.css在vue项目中的使用教程


Posted in Javascript onAugust 05, 2018

在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项目中的使用教程,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
Angular的$http与$location
Dec 26 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 Javascript
iconfont的三种使用方式详解
Aug 05 #Javascript
vue-content-loader内容加载器的使用方法
Aug 05 #Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 #Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 #Javascript
深入理解JavaScript的async/await
Aug 05 #Javascript
js数据类型检测总结
Aug 05 #Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 #Javascript
You might like
PHP 一个随机字符串生成代码
2010/05/26 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
Python编程中的for循环语句学习教程
2015/10/14 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
python实现实时视频流播放代码实例
2020/01/11 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
python模拟斗地主发牌
2020/04/22 Python
python如何导入依赖包
2020/07/13 Python
柯基袜:Corgi Socks
2017/01/26 全球购物
青年文明号创建承诺
2014/03/31 职场文书
车辆转让协议书
2014/09/24 职场文书
检讨书格式
2019/04/25 职场文书