在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 1755

    列出不等式后,把同时除Z把它去掉. 注意了,这里应该 是把直线变两点表示的向量更为简单,我开始就直接用直线写,后来,唉,写不下去了.. #include <iostream> #inclu ...

  2. leetcode第一刷_Minimum Depth of Binary Tree

    非常easy的题目.只是还是认为要说一下. 最小深度.非常快想到bfs,层序遍历嘛.本科的时候实在是没写过多少代码,一開始竟然想不到怎么保存一层的信息.后来想到能够压入一个特殊的对象,每次到达这个对象 ...

  3. Ajax的两种实现方式

    //ajax的jquery实现 function aclick(){//alert("測试一");var name = $("#userName").val() ...

  4. CSS艺术之---负margin之美

    CSS中负边距(nagative margin)是布局中常常使用的一个技巧.仅仅要运用得当时常会产生奇异的效果.勘称CSS中的奇淫巧计,非常多CSS布局方法都依赖于负边距.掌握它对于前端童鞋来说还是非 ...

  5. Centos安装FastDFS+Nginx

    一.安装环境: gcc:安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没有gcc环境,需要安装gcc: yum install gcc-c++ PCRE:PCRE(Perl C ...

  6. 怎样在Android.mk上加宏定义【转】

    本文转载自:http://blog.csdn.net/ttxgz/article/details/7591282 很简单, LOCAL_CFLAGS += -DWHATEVERDEFINE 就可以了

  7. nyoj--745--蚂蚁的难题(二)

    蚂蚁的难题(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 下雨了,下雨了,蚂蚁搬家了. 已知有n种食材需要搬走,这些食材从1到n依次排成了一个圈.小蚂蚁对每种食材 ...

  8. 【撸码caffe 一】syncedmen.hpp

    SyncedMemory类主要负责在主机(CPU)和设备(GPU)之间管理内存分配和数据同步工作,封装了CPU和GPU之间的数据交互操作. 补充一点GPU的相关知识: 对CUDA架构而言,主机端的内存 ...

  9. EOJ 3037 十六进制加法

    请编写程序实现两个十六进制整数的加法. 例如:十六进制整数 3762 和 05C3,3762+05C3 =3D25 十六进制整数 CB9 和 957,CB9+957=1610 Input 第 1 行: ...

  10. php如何将网上的图片下载到本地

    <?phpheader("Content-Type: application/force-download");header("Content-Dispositio ...