在vue项目中,由于页面需要动画效果,使用动画其实有多种方式,可以使用vue中的过渡transition,可以使用animate动画与transition配合使用,也可以单独使用animate动画库。

下面我们开始介绍在vue中单独使用animate动画,其实也非常简单,两步留可以实现:

第一步:安装:

在命令行中执行:npm install animate.css --save

第二步:直接调用

在需要展示页面的DOM元素中,直接使用animated中的动画class名,注意:必须使用animated这个class名,否则动画会无效 。

vue与animate.css的结合使用的更多相关文章

  1. vue 结合 animate.css

    这里说的是vue2.0和animate.css的结合使用.其实用过就知道用法是比较简单的.但是就是刚开始使用的时候,难免有的会遇到各种问题.简单的说说我所用过并且遇过的坑. 首先是transition ...

  2. vue使用animate.css类库实现动画

    首先安装animate.css类库 cnpm install animate.css –save 然后在vue的script文件中引用 import $ from '../assets/js/jque ...

  3. vue 使用Animate.css库

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. vue使用animate.css库

    //引入库 <link rel="stylesheet" type="text/css" href="animate.css"> ...

  5. vue2借助animate.css实现路由动画效果

    第一步: npm install animate.css --save 第二步:打开main.js import animate from 'animate.css' Vue.use(animate) ...

  6. vue过渡和animate.css结合使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  8. vue中使用animate.css

    一:使用animate.css的使用 1.安装npm install animate.css --save 2.在main.js中引入import animate from 'animate.css' ...

  9. vue中使用animate.css动画库

    1.安装: npm install animate.css --save 2.引入及使用: //main.js中 import animated from 'animate.css' Vue.use( ...

随机推荐

  1. POJ 3225

    基本参考http://blog.csdn.net/metalseed/article/details/8039326 总的来说,敲完一遍理解会更加好一点,标记下传法. U:把区间[l,r]覆盖成1I: ...

  2. RubyMine中自动完成只输入部分字母

    RubyMine中自动完成只输入部分字母 1,有下划线情况(其实看第二点跟下划线就关系不大了) 对于attr_reader之类的输入,输入attr之后,下划线可以不输入,然后输入r或者e都可以出来, ...

  3. 谈论java中怎样处理高并发的问题

    1 从最基础的地方做起,优化我们写的代码,降低必要的资源浪费.         a.避免频繁的使用new对象.对于整个应用仅仅须要存在一个实例的类.我们能够使用单例模式. 对于String连接操作,使 ...

  4. HDU 5338 ZZX AND PERMUTATIONS 线段树

    pid=5338" target="_blank" style="text-decoration:none; color:rgb(45,125,94); bac ...

  5. iOS不同版本号适配问题(#ifdef __IPHONE_7_0)

    部分參考http://www.cnblogs.com/ios8/p/ios-version-com.html 以下举个简单的样例来说明在iOS7.0和iOS6.1(以及更低版本号)之间的适配问题(用的 ...

  6. luogu4012 深海机器人问题 网络流

    关键词:最小费用最大流 题目大意:海底是个网格,每个网格边有一定价值的海底化石.每个路线可经过无限个机器人,但上面的化石只能采一次.机器人可沿网格边向东或向北移动.给定机器人起点和终点位置及所能容纳的 ...

  7. Python使用装饰器自动调用父类__init__

    众所周知,Python中class的构造函数实际是__new__(),但是如果我们执行p1=Point()的时候,不仅会调用Point的__new__方法,而且会调用Point的__init__方法. ...

  8. Asura监控---AsuraMonitor,阿修罗监控开源

    阿修罗Monitor是一个功能强大.灵活的监控系统. 系统安装简单,配置简单,相比zabbix, nagios,cacti,小米监控等都使用相当简单.只需要会写脚本,语言不限就可以实现任意监控需求. ...

  9. shp系列(二)——利用C++进行shp文件的读(打开)

    1.各数据类型及其字节数 BYTE 1;       char 1;    short 2;      int 4;    double 8; 2.位序big和little及其转换 对于位序是big的 ...

  10. 数组、链表、栈、队列和STL

    数组 数组是一种最基本的数据结构,它是内存上的一块连续存储空间.正因如此数组的随机访问很方便.但数组也有其固有的限制,大小分配后不能改变. STL中的数组 STL中的Array是静态数组模板,就是我们 ...