1.安装:

 npm install animate.css --save

2.引入及使用:

//main.js中
import animated from 'animate.css'
Vue.use(animated)

3.在vue文件中使用:

 <div class="ty">
<!-- 直接使用animated中的动画class名,注意:必须使用animated这个class名,否则动画会无效 -->
<div class="box animated bounceInDown"></div>
</div>

vue中使用animate.css动画库的更多相关文章

  1. 048——VUE中使用animate.css动画库控制vue.js过渡效果

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

  2. 基于animate.css动画库的全屏滚动小插件,适用于vue.js(移动端、pc)项目

    功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...

  3. css3动画和animate.css动画库使用

    CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...

  4. Animate.css动画库,简单的使用,以及源码剖析

    animate.css是什么?能做些什么? animate.css是一个css动画库,使用它可以很方便的快捷的实现,我们想要的动画效果,而省去了操作js的麻烦.同时呢,它也是一个开源的库,在GitHu ...

  5. 在vue中使用animate.css

    animate.css是一款前端动画库,相似的有velocity-animate 用法: 首先 npm install animate.css --save 然后在vue文件的script中引入: i ...

  6. vue中使用animate.css

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

  7. (生产)animate.css 动画库

    官网:https://daneden.github.io/animate.css/ Animate.css是一个有趣的,跨浏览器的css3动画库 用法 首先引入animate css文件:    &l ...

  8. vue中使用animate.css实现动画

    参考链接:https://www.cnblogs.com/ccyinghua/p/7872694.html 参考链接:https://www.jianshu.com/p/2e0b2f8d40cf 使用 ...

  9. 3个CSS动画库,比Animated还好用,让你的网站酷炫起来

    本文首发于https://www.1024nav.com/tools/css-animation-library 转载请注明出处 整理了日常前端开发中常用的css动画库,让你的网页动起来,可以在生成中 ...

随机推荐

  1. ldap文件

    demo.ldif dn:dc=sgp,dc=com objectclass:domain objectclass:top o:Michael Blog dc:sgp dn:ou=Developer, ...

  2. Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)

    一段PHP程序执行报错: Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 261181 ...

  3. zabbix主动被动模式说明/区别

    说明:使用zabbix代理有很多好处,一方面可以监控不可达的远程区域:另一方面当监控项目数以万计的时候使用代理可以有效分担zabbix server压力,也简化分布式监控的维护. 具体:主动.被动模式 ...

  4. Windbg(2)

    摘抄于:http://www.cnblogs.com/awpatp/category/228209.html Debug相关的一些小技巧 摘要: 1. 如何Debug一个进程的子进程? 答: 使用Wi ...

  5. Windbg使用方法

    hgy413的专栏 http://blog.csdn.net/hgy413/article/category/1143065

  6. 1503: [NOI2004]郁闷的出纳员 (SBT)

    1503: [NOI2004]郁闷的出纳员 http://www.lydsy.com/JudgeOnline/problem.php?id=1503 Time Limit: 5 Sec  Memory ...

  7. Android 获取包名,版本信息

    Android 获取包名,版本信息及VersionName名称     <span style="font-size: 14px;">private String ge ...

  8. 【Android】详解Android的menu菜单

    在软件应用过程中,菜单的存在是必不可少的,我这次讲一下,我对android菜单的一个基础做法吧 Android的菜单分为三种类型:选项菜单(Option Menu).上下文菜单(Context Men ...

  9. 代码管理(二)sourcetree 安装与使用

    一 .SourceTree简介 SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端,拥有可视化界面,容易上手操作.同时它也是Mercurial和Subve ...

  10. Newtonsoft.Json C# Json序列化和反序列化工具的使用、类型方法大全 C# 算法题系列(二) 各位相加、整数反转、回文数、罗马数字转整数 C# 算法题系列(一) 两数之和、无重复字符的最长子串 DateTime Tips c#发送邮件,可发送多个附件 MVC图片上传详解

    Newtonsoft.Json C# Json序列化和反序列化工具的使用.类型方法大全   Newtonsoft.Json Newtonsoft.Json 是.Net平台操作Json的工具,他的介绍就 ...