vue+ webpack中的animate.css实现的执行多个连续的动画
1.安装
npm install animate.css
2.使用方法
入口文件App中进行引入 import animate from 'animate.css'
3.多个连续的动画
实现的效果：实现了三个蓝色方块依次以不同效果展现出来。
模板中代码：
<template>
<div class="hello">
<div class="box rotateIn" style="animation-duration:2s;animation-delay:1s;animation-iteration-count:1;animation-fill-mode:both;"></div>
<div class="box fadeInLeft" style="opacity:0;animation-duration:3s;animation-delay:2s;animation-iteration-count:1;animation-fill-mode:both;"> </div>
<div class="box fadeInUp" style="opacity:0;animation-duration:3s;animation-delay:3s;animation-iteration-count:1;animation-fill-mode:both;"> </div>
</div>
</template>
样式表：
<style scoped>
.box{width:100px;height:80px;background: blue;margin:5px;}
</style>
animate.css代码解析：
animation-duration---动画持续时间
animation-delay---动画延迟时间，多个元素，延迟时间要依次累加
animation-iteration-count---动画执行次数
animation-fill-mode:both---设置对象状态为动画结束或开始的状态
ps:还可以写成样式.xxx{animation-duration:2s;animation-delay:4s;animation-fill-mode:both;}
别忘了添加前缀~~
最新文章
- Android Studio导入修改
- knockoutJS学习笔记03：knockout简介
- 整合Spring、SpringMVC、MyBatis
- Oracle 应用于.NET平台
- day4----装饰器
- java运行期类型鉴定
- 两年内从零到每月十亿 PV 的发展来谈 Pinterest 的架构设计（转）
- 网页弹出窗口工具推荐之jqmodal
- Python用可变参数找出最大值和最小值
- Replica Set + sharding搭建mongodb集群
- webmagic爬虫抓取工作室成员博客
- MMU二级页表
- iOS学习——更改导航栏的返回按钮的标题与颜色
- [转][Angularjs]$http.post与$.post
- 还是要习惯在linux环境下作Java开发
- rabbitmq安装及基本操作（含集群配置）
- .net 读取/保存 文件 到 局域网 服务器
- jquery zTree异步搜索的例子--搜叶子节点
- MEF and AppDomain z
- es6从零学习（一）let 和 const 命令