使用 Vanilla JavaScript 进行下拉刷新动画

下拉刷新是智能手机上非常流行的滑动手势，允许用户在现有数据之上加载新内容。如今，所有流行的智能手机应用以及网页应用都采用了这一手势，它已成为用户体验的重要组成部分。

几天前，我在dribbble上看到了这种动画，所以我想为什么不提出自己的版本呢。

你猜怎么着，我没有用任何库或 JQuery 插件，只用普通的 Vanilla JavaScript 就构建了它。😎

一个非常简单的标记，一个顶部装载的容器，其中将包含装载机和一堆卡片。

现在让我们开始有趣的事情吧😁。

其理念是默认隐藏加载容器，并在用户向下滑动时将其向下滑动。transform
-style:preserve-3d将使卡片能够定位在 3D 空间中，卡片包装器上的perspective属性将决定用户从其视角看到的视图；值越低，3D 效果越强烈。请注意，子元素未设置 perspective。
更多关于 CSS 3D 动画和变换的信息。

这就是 CSS，现在让我们开始添加滑动手势。

JS 中的触摸事件由触摸事件监听器处理。这些监听器类似于鼠标事件，但它们允许在触摸表面上进行多次触摸。

pStart 和 pCurrent 对象将存储起始和当前触摸的位置。我们需要它们来计算 Y 坐标的变化，从而计算卡片的旋转。

在 swipeStart() 函数中，我们将捕获触摸坐标并将其分配给 pStart 对象。

在 swipe() 函数中，我们将当前触摸坐标设置为 pCurrent 对象。下一步是计算起始 Y 位置和当前 Y 位置之间的差值，以计算滑动距离，并基于该距离的 30% 进行旋转。只有当距离大于 100 时，才会显示加载容器。

如果触摸已经开始但尚未启用加载，swipeEnd() 函数将撤消旋转。

加载过程中，出于演示目的，加载容器会向下滑动 2 秒。实际加载时间可能因服务器响应而异，可能更长或更短。加载完成后，加载容器和卡片将恢复到初始状态。

我从这个stackoverflow 问题中获取了 JavaScript 的参考。

完整源代码请见我的codepen。打开 devtools 查看动画效果。

希望你今天能学到一些新东西😄。如果你有任何疑问，或者对代码改进有任何建议，欢迎留言。

欢呼吧，编码快乐🍻✌

这篇文章最初发布在 Medium 上。查看我的 Medium 个人资料@vijit2ail