css animation动画完成后隐藏_原生 JS 封装三种 loading 动画

项目文件已上传码云：叁贰壹/JavaScript封装loading动画效果

可直接访问页面查看效果：loading动画效果

预览三种 loading 动画效果：

loading.js 分析

1. 将从 index.js 构造的对象传入 Loading 构造函数

/**

2. 在 Loading 原型链上添加 init 方法，做初始化 loading 效果

/* 初始化 loading 效果，在原型链上添加 init 方法 */

3. 这里就要分三种 type 值，对Loading的动画部分的 innerHTML 进行不同的编写

/* 创建 loading 结构 */

4. 准确的说是每次 loading 效果的变化都删除了子节点

// 对loading隐藏

到此 JS 的 Loading 就封装好了，接下来运用 css 实现动画效果

loading.css 分析

对 loading 整体布局

/* 对 loading  整体布局*/

1. 第1种 loading 动画的实现：

8个小球的排列是将两个正方形叠加，将其中一个旋转 45° 来实现的

.

2. 第2种 loading 动画的实现：

第二种动画在小球的动画上是非常相似的，重复的部分可重复利用，其中的 animation 也相同

.

3. 第3种 loading 动画的实现：

.

CSDN：https://blog.csdn.net/weixin_43148062

简书：https://www.jianshu.com/u/45339cbb7573