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 相关文章推荐
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
vue组件是如何解析及渲染的?
Jan 13 Vue.js
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
解析thinkphp基本配置 convention.php
2013/06/18 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
JS小框架 fly javascript framework
2009/11/26 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
python实现中文输出的两种方法
2015/05/09 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
利用Python计算KS的实例详解
2020/03/03 Python
python实现图像拼接
2020/03/05 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
python和JavaScript哪个容易上手
2020/06/23 Python
如何用python写个模板引擎
2021/01/14 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
PHP笔试题
2012/02/22 面试题
创建市级文明单位实施方案
2014/03/01 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
服务整改报告
2014/11/06 职场文书
小学生暑假生活总结
2015/07/13 职场文书
初中生物教学反思
2016/02/20 职场文书
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis