在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. 从OTF字体文件里查找字体名称

    for in ? 使用神器vim就好了. . . vim ./AKZIDENZGROTESK-COND.OTF

  2. Swagger框架学习分享

    Swagger框架学习分享 转至元数据结尾 Created and last modified by 刘新宇 大约1分钟曾经 pageId=162045803#page-metadata-start& ...

  3. Codeforces Round #350 (Div. 2) E. Correct Bracket Sequence Editor 线段树模拟

    E. Correct Bracket Sequence Editor   Recently Polycarp started to develop a text editor that works o ...

  4. 安装visual studio 2013【转】

    本文转载自:http://blog.csdn.net/tina_ttl/article/details/51544733#1下载-visual-studio-ultimate-2013安装包 微软已经 ...

  5. Android的编译环境--Build系统【转】

    本文转载自:http://blog.csdn.net/kitty_landon/article/details/60764232 Android是一个庞大的系统,包含太多的模块,各种模块的类型也有10 ...

  6. python spark 求解最大 最小 平均

    rdd = sc.parallelizeDoubles(testData); Now we’ll calculate the mean of our dataset.   1 LOGGER.info( ...

  7. 【转】寻找最好的笔记软件:海选篇 (v1.0)

    原文网址:http://blog.sina.com.cn/s/blog_46dac66f01000b55.html   序言: 我见过的多数软件爱好者,无论是资深用户,还是初级用户,都有一个梦想:找到 ...

  8. Spring进行表单验证

    转自:https://www.tianmaying.com/tutorial/spring-form-validation 开发环境 IDE+Java环境(JDK 1.7或以上版本) Maven 3. ...

  9. postgresql 常规操作以及检查备份

    一.建表时,复制源表的信息test=# test=# \d test.t1 Table "test.t1" Column | Type | Collation | Nullable ...

  10. Java中的命名规范到底是怎样的

    内容摘要:命名规范二,java中的方法名,对象名和字段名的第一个单词的首写字母应该小写,而后面的每个单词的首字母都应该小写 要想将java基础学的十分的牢固就必须将java中的命名规范掌握好了.俗话说 ...