在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. 【剑指offer】无聊的1+2+...+n

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/27964027 题目描写叙述: 求1+2+3+...+n,要求不能使用乘除法.for.whi ...

  2. Foundation框架和文件操作

    NSString --实例化方法-------------- NSString *str = [[NSString alloc] init]; NSString *str = [[[NSString ...

  3. JPA相关注解

    JPA注解 一.基本注解 1.表相关   @Entity   仅仅要加了这个注解就具备了表和实体的映射关系,表名就是实体名   @Table(name="表名")    一般和实体 ...

  4. luogu2441 角色属性树

    题目大意:维护一个可查询.修改的树,查询的是一个节点的:离它距离最近的.组成两个节点Key值的质因数存在交集的.祖先节点:修改是修改一个节点的key值. 如果组成两个Key值的质因数存在交集,则两个数 ...

  5. Gym-101158J Cover the Polygon with Your Disk 计算几何 求动圆与多边形最大面积交

    题面 题意:给出小于10个点形成的凸多边形 和一个半径为r 可以移动的圆 求圆心在何处的面积交最大,面积为多少 题解:三分套三分求出圆心位置,再用圆与多边形面积求交 #include<bits/ ...

  6. 利用道格拉斯·普客法(DP法)压缩矢量多边形(C++)

    1.算法描述 经典的Douglas-Peucker算法(简称DP法)描述如下: (1)在曲线首尾两点A,B之间连接一条直线AB,该直线为曲线的弦: (2)得到曲线上离该直线段距离最大的点C,计算其与A ...

  7. 机器学习——SVM讲解

    支持向量机(Support Vector Machine) SVM是一类按监督学习方式对数据进行二元分类的广义线性分类器,决策边界是对学习样本求解的最大边距超平面.只需要知道,SVM是一个有监督的分类 ...

  8. HBase编程 API入门系列之delete.deleteColumn和delete.deleteColumns区别(客户端而言)(4)

    心得,写在前面的话,也许,中间会要多次执行,连接超时,多试试就好了. delete.deleteColumn和delete.deleteColumns区别是: deleteColumn是删除某一个列簇 ...

  9. 修改 Mac 默认 PHP 运行环境

    更新了自带php版本后,修改默认php环境变量 首先,创建 .bash_profile 文件 sudo nano ~/.bash_profile # 添加一行.注意 PHP5.4.10 修改成你正在运 ...

  10. lua单链表实现

    List = {} --创建一个节点 function List.new(val) return {pnext = nil, value = val} end --往一个节点后添加一个节点 funct ...