vue中按需使用animate.css以及使用方法

animate.css是一个很方便的动画库,可以通过npm直接安装

npm install animate.css --save

安装以后打开node_modules文件夹下的animate.css文件夹下的animate-config.json,把不需要的设为false即可

  "attention_seekers": {
    "bounce": false,
    "flash": false,
    "pulse": false,
    "rubberBand": false,
    "shake": false,
    "headShake": false,
    "swing": false,
    "tada": false,
    "wobble": false,
    "jello": false,
    "heartBeat": false
  },

使用方法是加在divclass中,第一个是定死的animated,第二个是你使用的动画名称

<div class="animated bounce">Example</div>

当然,你还可以设置延迟,有四个选项,用法如下

<div class="animated bounce delay-2s">Example</div>
<div class="animated bounce delay-3s">Example</div>
<div class="animated bounce delay-4s">Example</div>
<div class="animated bounce delay-5s">Example</div>

你还可以设置动画的速度,有四个选项,用法如下,分别是慢,更慢,快,更快。

<div class="animated bounce slow">Example</div>
<div class="animated bounce slower">Example</div>
<div class="animated bounce fast">Example</div>
<div class="animated bounce faster">Example</div>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,846评论 1 45
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,368评论 0 3
  • 在AngularJS应用中创建动画,有三种途径: 使用CSS3动画 使用JavaScript动画 使用CSS3过渡...
    oWSQo阅读 1,503评论 0 3
  • 夏天过去了 ,美丽的秋天来到了,叶子还了一片片从树上落下来,大雁往南飞了,天气也渐渐变凉了。 ...
    胡思诺阅读 218评论 0 0
  • 韦讽录事宅观曹将军画马图 唐代:杜甫 国初已来画鞍马,神妙独数江都王。 将军得名三十载,人间又见真乘黄。 曾貌先帝...
    绿兔子000阅读 498评论 0 0