原生 JS 封装三种 loading 动画

Answer 1

本文旨在展示原生JS封装三种loading动画的实现方法，包括加载效果的初始化、动画部分的编写以及最终运用CSS实现动画效果。以下是具体步骤和方法分析。

首先，项目文件已上传至码云平台，页面直接访问地址为：loading动画效果。

本文预览三种不同类型的loading动画效果，实现方法如下：

在JavaScript代码中，定义Loading原型链上的init方法，用于初始化loading效果。

根据三种类型（type值）的不同，对Loading的innerHTML进行相应的编写，实现不同动画效果。重要的是，每次效果变化时，都会删除子节点以确保动画流畅。

至此，JS的loading封装完成，接下来是CSS动画实现。

在CSS文件中，对loading整体进行布局设计。采用将两个正方形叠加，其中一个旋转45°的方式，排列8个小球，形成动画效果的基础布局。

对于第二种动画，其小球动画与第一种类似，重复部分的代码可以复用，其中的animation属性也保持一致。

第三种动画的实现则基于CSS的动画属性，同样通过调整小球的位置和大小，实现动态加载效果。

总结，本文详细阐述了使用原生JS和CSS封装三种loading动画的全过程，从初始化效果、编写动画代码到实现CSS动画，每一步都确保了动画效果的流畅和美观。通过代码示例，读者可以直观地理解和实现类似功能，提升用户体验。