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 URL锚点取值方法
Feb 25 Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 Javascript
基于javascript实现移动端轮播图效果
Dec 21 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
Content-type 的说明
2006/10/09 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
javascript编程起步(第五课)
2007/02/27 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
Python numpy 常用函数总结
2017/12/07 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
python生成word合同的实例方法
2021/01/12 Python
微博营销计划书
2014/01/10 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
校园十大歌手策划书
2014/02/01 职场文书
文明演讲稿范文
2014/05/12 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
2014年社区民政工作总结
2014/12/02 职场文书