在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. 互联网服务器的实现过程需要考虑哪些安全问题 & 加解密及哈希知识点

    http://www.cnblogs.com/charlesblc/p/6341265.html 其中的一篇. 参考 https://zhuanlan.zhihu.com/p/20336461?ref ...

  2. ZOJ 3717

    这题是二分+2SAT. 总结一下SAT题的特征.首先,可能会存在二选一的情况,然后会给出一些矛盾.据这些矛盾加边,再用SAT判定. 这一道题好像不能直接用printf("%0.3lf&quo ...

  3. LNMP一键安装包 V1.1 公布

    LNMP一键安装包 是一个用Linux Shell编写的能够为CentOS/RadHat.Debian/Ubuntu VPS(VDS)或独立主机安装LNMP(Nginx.MySQL/MariaDB.P ...

  4. poj2135(简单的最小费用流问题)

    题目链接:http://poj.org/problem?id=2135 Farm Tour Time Limit: 1000MS   Memory Limit: 65536K Total Submis ...

  5. Linux Terminal fortune

    Linux下,我们能够使用apt-get安装fortune,这是一个比較有趣的功能 在输入fortune之后,Terminal会输出一句名言.诗句,或一些有趣的话: 默认情况下.fortune仅仅会显 ...

  6. sikuli+eclipse实例

    设置sikuli环境变量 如果在执行脚本的时候出现以下错误: Getting the VisionProxy.dll: Can not find dependent libraries... 把Sik ...

  7. Jquery-Uncaught ReferenceError: $ is not defined报错

    在我的jsp页面上有这些js代码: //载入数据 $(document).ready(function() { var param={}; param.page=3; param.size=10; $ ...

  8. Java-Maven:POM百科

    ylbtech-Java-Maven:POM百科 Maven是以项目为中心的设计.POM(project object model)是Maven对一个单一项目的描述.没有POM的话,Maven是毫无用 ...

  9. springboot的推荐模板引擎-Thymeleaf

    1)添加对themeleaf的支持的依赖 <!--Thymeleaf--> <dependency> <groupId>org.springframework.bo ...

  10. .net web api跨域问题

    No 'Access-Control-Allow-Origin' Ajax跨域访问解决方案   No 'Access-Control-Allow-Origin' header is present o ...