- 博客(5)
- 收藏
- 关注
RSS订阅原创 复刻小红书Web端打开详情过渡动画
本文介绍了FLIP动画的实现原理，通过复刻小红书Web端的丝滑过渡效果进行演示。FLIP动画分为四个步骤：First记录初始状态、Last执行DOM变化并记录最终状态、Invert计算差异并反向应用、Play执行动画过渡。文章通过方块移动案例详细展示了每个步骤的代码实现，重点解释了Invert阶段如何通过translate使元素在视觉上保持在初始位置，而实际已完成位置变化，最终通过动画过渡实现流畅效果。该方法巧妙利用浏览器渲染机制，实现了高性能的动画效果。
2026-02-20 16:09:22
626
原创 Grid布局
本文介绍了CSS网格布局(Grid)的核心属性和用法。主要内容包括：使用display:grid创建网格容器；通过grid-template-columns/rows定义网格行列尺寸；repeat函数简化重复定义；justify/align-content控制对齐方式；gap设置间距。还讲解了隐式网格的grid-auto-rows/columns属性，minmax函数定义尺寸范围，以及auto-fill与auto-fit关键字的区别：auto-fill尽可能多排网格，auto-fit则会自适应填充空间。文章
2025-09-25 22:57:58
1077
1原创 indexDB学习笔记——结合TodoList实战（附源码）
结合TodoList实战，掌握IndexDB增删改查的使用，解锁浏览器GB级存储能力
2025-04-12 21:02:23
837
原创 一文搞懂前端性能优化—Gzip压缩（Vue+Nginx项目，实时压缩与静态压缩双方案）
使用gzip压缩前端资源的体积是前端性能优化的手段之一优化的基本逻辑：压缩包体积减少，前端资源加载变快。资源体积减少带来的效率提升>浏览器解压gzip的效率。
2025-02-06 19:44:07
1459
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人