- 博客(86)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 第5篇：Framer Motion 页面动画与 AnimatePresence 实战
在motion中使用 AnimatePresence 管理动画状态
2025-04-16 15:53:09
589
原创 第 4 篇：Motion 拖拽与手势动画（交互篇）—— 打造直觉化交互体验
Framer Motion 的拖拽与手势系统让实现复杂交互变得异常简单。本文将深入解析核心 API，并通过实战案例演示如何创造自然流畅的交互体验。
2025-04-16 14:14:13
864
原创 第3篇:深入 Framer Motion Variants：掌握组件动画编排的艺术
在动态交互主导的现代前端开发中，优雅的动画效果已成为提升用户体验的重要元素。Framer Motion 的 Variants（动画变体）功能，通过状态化管理和动画编排能力，让复杂动效的实现变得前所未有的高效。本文将深入解析 Variants 的核心机制，并揭示高阶应用技巧。通过掌握 Variants 的深度应用，开发者可以将动画从简单的视觉装饰转化为真正的交互语言。符合物理运动规律强化用户操作反馈提升界面层次感知保持60fps流畅体验。
2025-04-16 00:19:17
608
原创 第 2 篇：快速上手 Framer Motion（实操入门）
安装和配置 Framer Motion使用motion.div创建简单的动画添加交互效果（悬停与点击）配置过渡效果，控制动画的时序和缓动这些都是 Framer Motion 中非常基础和常见的用法，掌握了这些，你就可以轻松为 React 应用添加流畅的动画效果。接下来，我们将在第 3 篇中深入学习如何使用Variants来实现复杂的动画效果。敬请期待！
2025-04-15 23:59:04
730
原创 5.释放 Framer Motion 的创意潜力：`useTransform` 进阶指南
映射到新的值，你可以实现各种各样引人入胜的动画和交互效果。无论是简单的数值转换，还是复杂的颜色、路径操作，你可以将数值映射到各种各样的属性，例如颜色、SVG 路径的偏移量、滤镜效果等等。，你将能够解锁 Framer Motion 的全部潜力，打造出令人惊艳的用户界面动画。可以被应用到元素的样式或其他动画属性上，从而创建出基于输入值的动态变化。，并根据你提供的转换规则（可以是转换函数或查找表），生成一个新的。都为你提供了强大的灵活性和控制力，让你的动画更具表现力。的当前值作为参数，并返回你希望输出的新值。
2025-04-15 16:21:43
416
原创 4.解锁 Framer Motion 的核心力量：`useMotionValue` 深度解析
它提供了一种响应式的方式来管理动画数值，并能够与其他 Framer Motion 的 API 协同工作。它不仅仅是一个存储数值的 Hook，更是驱动动画的引擎，为你提供了对动画过程的底层控制。对象不仅仅包含当前数值，还拥有一些特殊的方法和属性，使其能够无缝地集成到 Framer Motion 的动画系统中。，你可以实现对动画过程的精细控制，创建出各种各样自定义的、引人入胜的用户体验。方法返回一个取消订阅的函数，务必在组件卸载时调用它，以避免潜在的内存泄漏。在 Framer Motion 的动画世界中，
2025-04-15 16:20:33
315
原创 3. Framer Motion 中 motion 组件
等其他 Framer Motion 功能结合起来，创建出复杂而流畅的用户界面动画。记住，几乎所有的视觉属性都可以通过 Framer Motion 进行动画控制，尽情发挥你的创造力吧！中，你可以轻松地为其添加各种动画和交互效果。组件是 Framer Motion 的基石，通过将标准的 HTML 和 SVG 元素包裹在。你可以使用它来创建能够进行动画和手势交互的 HTML 和 SVG 元素。属性，我们可以实现路径的绘制动画效果。版本，并为其添加 Framer Motion 特有的动画属性 (
2025-04-15 16:17:57
780
原创 2. Framer Motion入门从＜motion.div /＞开始
通过掌握这些基本的概念和属性，你就可以开始为你的 React 应用添加各种各样令人愉悦和流畅的动画效果了。随着你对 Framer Motion 的深入学习，你还会发现更多高级的功能，例如。它是一个由 Framer Motion 提供的特殊组件，用于增强标准的 HTML 元素，使其具备动画和手势交互的能力。首先，确保你的 React 项目已经安装了 Framer Motion。接下来，你可以通过为其添加特定的动画属性来定义动画效果。，它们能帮助你创建更复杂和自定义的动画。，创建了一个弹簧效果的动画。
2025-04-15 16:15:35
1011
原创 1.Framer Motion 中 motion/react 和 motion/react-client 的用法和区别
通过上述梳理，您可以根据组件类型和渲染环境，在项目中无缝切换 motion/react 与 motion/react-client，既保证动画体验，又实现包体与构建的最优配置。
2025-04-15 16:05:14
1042
原创 Framer Motion简介
Framer Motion 是一个强大且优雅的 React 动画库，它通过简洁的 API 和丰富的功能，使得在 React 应用中创建各种动画和交互效果变得简单而有趣。无论是简单的 UI 过渡，还是复杂的手势驱动动画，Framer Motion 都能提供强大的支持，并帮助你提升用户体验。Framer Motion 提供了一套简洁且强大的 API，可以让你以声明式的方式控制组件的动画效果，无论是简单的过渡还是复杂的编排动画和手势识别，都能优雅地实现。Framer Motion 是一个。
2025-04-15 16:02:35
1373
原创 css中的3d使用：深入理解 CSS Perspective 与 Transform-Style
和是 CSS 3D 变换中不可或缺的两个属性。赋予了场景深度，模拟了观察者的视觉体验；而则决定了子元素如何在 3D 空间中呈现。掌握这两个属性的用法，将为您的网页设计带来更丰富的视觉层次和更具吸引力的交互体验。现在，不妨动手尝试一下，释放您的创意，打造出令人惊叹的 3D 世界吧！
2025-04-14 18:20:59
907
原创 深入理解重排（Reflow）与重绘（Repaint），写出高性能 CSS 动画
重排是指浏览器在渲染过程中，重新计算元素的几何结构（位置、大小、盒模型）的过程。重绘是指元素样式发生改变（如颜色、透明度、阴影等）而不影响布局的情况下，浏览器重新将像素绘制到屏幕的过程。✅ 动画尽量只使用transform和opacity✅ 使用提前告诉浏览器优化这些属性❌ 避免动画，改用或scale()替代❌ 不要使用通过理解 Reflow 与 Repaint 的工作机制，我们可以编写出更高效、更流畅的 CSS 动画，提升用户体验的同时，降低性能消耗。
2025-04-07 14:15:32
834
原创 深入理解CSS对齐属性：align-items, align-self, justify-items, justify-self
属性作用对象方向适用布局覆盖关系容器垂直Flex/Grid被align-self覆盖align-self子项垂直Flex/Grid覆盖容器水平Grid被覆盖子项水平Grid覆盖记忆口诀想调垂直用align，想调水平用justify容器设置用-items，单个调整用-selfGrid布局全支持，Flex缺更精准地控制布局中的元素位置减少不必要的嵌套和冗余代码创建更灵活、响应式的设计容器定义全局规则子项只在必要时覆盖保持代码的可预测性和可维护性。
2025-04-07 00:23:14
2394
原创 CSS 继承值转换绝招：initial、inherit、unset 与可继承性全览
在写 CSS 样式时，我们经常需要处理子元素的样式继承问题。这里我们来统一理解initialinheritunset，并列出常见的和属性。
2025-04-06 23:46:41
978
原创 深入理解 IntersectionObserver：让前端滚动监听更高效
是浏览器提供的 API，用于监听目标元素是否进入或离开可视区域（视口）或某个指定的父容器。它的特点是：✅高效：相比scroll事件，它不会频繁触发，提高性能。✅易用：不需要手动计算。✅灵活：可以自定义监听范围（root）、触发阈值（threshold）、提前触发（rootMargin适用于懒加载、无限滚动、动画触发、广告曝光、固定导航栏等场景。是前端开发中必备的 API，能大幅提高性能，适用于懒加载、无限滚动、动画触发、广告曝光等场景。📌如果你的项目还在用scroll事件监听滚动，赶紧试试吧。
2025-04-01 13:33:10
1126
原创 为什么 1rem = 16px？能改吗？（以及如何优雅地调整它！）
能改的话，怎么改得优雅又丝滑？这就是 1rem = 16px 的原因，完全是浏览器的锅！，顺便教你如何“篡改”它的默认值，让你的布局更加顺手！或者你有自己的独门秘籍？如果你用 Tailwind CSS，可以修改。如果你不想 Tailwind 乱改你的。如果你写 CSS 久了，你肯定遇到过。你也可以试试，看你的团队习不习惯～这样，你就能在不同部分用不同的。的缩写，表示的是**根元素（你可以随心所欲地改大小，但。这个单位，但有没有想过，这种难搞的数学题了！
2025-03-24 18:47:45
544
原创 理解 Stacking Context：让 z-index 乖乖听话！
它就没有创建新的 Stacking Context，那么。🚀 赶紧去项目里试试！，每个楼层（context）里，元素按照。今天我们就用简单易懂的方式，搞懂。在前端开发中，你可能遇到过。，也可能还是被 B 楼的。失效的情况，调了半天。（强制创建新楼，防止。
2025-03-21 23:50:05
409
原创 Tailwind CSS 中的 spacing 详解
（间距）是 Tailwind CSS 里的一个核心概念，它主要用于控制 padding。Tailwind 提供了一套默认的。Tailwind 让布局变得简单直观！Tailwind 预定义了一组。如果默认值不够用，可以在。如果要在 CSS 里使用。
2025-03-18 22:40:27
576
原创 玩转 Tailwind CSS：深入解析函数与指令
主要用于引入框架样式、组织代码、复用样式等。你可以把它们想象成 Tailwind 版的“魔法咒语”，帮助你写出更整洁的 CSS。如果你想在 CSS 里使用 Tailwind 配置的颜色、间距等，可以用。，可以让你的代码更加优雅、可维护。如果你正在使用 Tailwind CSS，可能已经习惯了各种。如果你想要自定义 Tailwind 的行为，就得先明白。里，帮助你动态访问 Tailwind 主题配置。里修改配置，而不是在 CSS 里使用。这样，你在 HTML 里就可以。Tailwind CSS 的。
2025-03-18 22:31:55
1111
原创 解决 React 中的 Hydration Failed 错误
如果组件依赖于异步数据（例如通过 API 请求获取数据），而这个数据没有在服务器端渲染完成前加载完毕，就会造成服务器端和客户端渲染的 HTML 不一致，导致水合错误。对于依赖于动态内容的部分（如时间戳、随机数等），你应该确保这些内容只在客户端渲染时生成，而不是在服务器端渲染时生成。），这些内容会在每次渲染时变化，导致服务器和客户端渲染的 HTML 不一致，从而触发水合失败。这样，数据会在服务器端准备好后再进行渲染，确保服务器端和客户端渲染的 HTML 一致。这两者不一致，就会导致 HTML 的差异。
2025-03-11 23:48:55
1001
原创 Next.js Server Action 提交 vs 前端 Fetch 提交：核心区别与优劣分析
前端 Fetch 提交，指的是在 React 组件中，使用原生fetch或axios请求，直接将数据提交到后端 API（如 Strapi）。是 Next.js 14+ 提供的一种内置特性，它允许你直接在服务器上处理表单提交，避免数据流直接暴露在前端。如果你的项目是公开展示数据，推荐直接使用fetch。如果是提交敏感数据，推荐使用。
2025-03-09 14:05:35
1042
原创 react中的useContext-弊端（二）
方面非常有用，但它并不是万能的。在某些情况下，它可能会带来。中存储的数据结构过于复杂，会导致代码变得难以管理。，因为它会导致整个组件重新渲染。只能在 React 组件树的。如果某个状态变化非常频繁（如。，代码更清晰，维护更容易。
2025-03-06 19:19:13
886
原创 react中的useContext--为什么使用（一）
让子组件把新的数据“反向”传回父组件，让父组件更新数据。React 提供了 useContext。，子组件无法直接修改父组件的数据。在 React 中，，但这还不算太糟糕。，就会变得非常痛苦。
2025-03-06 19:15:55
625
原创 深入浅出：Strapi REST API 中的 populate 参数详解（二）---- 获取嵌套数据
populate在 Strapi 中，populate是一个非常强大的工具，能够让你轻松地查询和填充关联数据。通过合理使用populate，你可以避免多次发送请求，从而优化前端与后端的交互。特别是在数据关系复杂的情况下，populate的多级查询能够帮助你一站式获取所需的所有数据。希望这篇文章帮助您更好地理解 Strapi 中的多级查询。通过合理使用populate，您可以高效地获取嵌套关系的数据。如果您有任何疑问或需要进一步的帮助，请随时与我联系！参考文档Strapi Populate 文档。
2025-03-05 18:22:28
838
2
原创 理解 React Portal：让你的组件跳出层级限制
在 React 中，组件默认是渲染在父组件的 DOM 树中的。比如你有一个父组件，它包含了多个子组件，每个子组件都渲染在父组件的 HTML 结构里。这种渲染方式是 React 的常规操作。然而，有时候我们需要让某些组件脱离父组件的 DOM 结构，单独渲染到其他位置。比如当我们使用。
2025-03-05 15:10:03
1250
原创 深入浅出：Strapi REST API 中的 populate 参数详解（一）
在默认情况下，Strapi 并不会自动返回与查询数据相关的任何关联内容。举个简单的例子，当你查询某篇文章时，通常你只会得到文章的基本字段，比如标题、日期等等。而如果文章关联了作者、评论，或者图片等媒体内容，这些数据是不会被自动加载的。为了获取这些相关信息，你需要显式地使用 populate 参数来“展开”这些关联字段。
2025-02-26 17:30:44
807
原创 Strapi 内容类型入门教程：快速上手与选择最佳结构
在 Strapi 中，内容类型（Content Types）定义了数据的结构和属性。它们决定了你将如何存储、管理和展示不同种类的数据。通过内容类型，Strapi 能够让你轻松创建 API 来读取、写入、更新和删除数据。Strapi 提供了几种不同的内容类型，每种类型适用于不同的数据结构和使用场景。以下是最常见的几种内容类型，以及它们各自的特点和适用场景。Strapi 提供了丰富的内容类型选项，使得你可以灵活地设计和组织数据。通过合理选择和组合这些内容类型，你可以高效地管理项目中的数据结构。
2025-02-25 19:20:08
630
原创 深入理解 DOM 和 CSSOM：网页渲染的核心
DOM 是浏览器用于表示网页内容和结构的对象模型。它将网页的 HTML 或 XML 文档表示为一个树形结构，每个部分（如元素、文本和属性）都成为一个节点。通过 JavaScript，开发者可以操作这些节点，从而动态地修改页面的内容和结构。CSSOM 是浏览器用来表示 CSS 样式的对象模型。与 DOM 类似，CSSOM 将 CSS 样式表表示为一棵树，其中的每个节点代表一个样式规则、选择器或者属性。浏览器通过解析 CSS 文件，构建出一个 CSSOM 树，并与 DOM 结合来决定如何渲染网页。
2025-02-23 13:04:14
1001
原创 使用快捷键高效管理 VSCode：提升工作效率，告别鼠标操作
如果你想提高工作效率，减少鼠标操作，掌握键盘快捷键是一个非常有效的方式。在编程过程中，熟练使用快捷键能够快速管理文件、标签页，节省时间并提升效率。比如，和可以快速打开和关闭文件，而、**Ctrl + ** 和等快捷键可以帮助你轻松管理代码和命令行操作。学会这些快捷键，你会发现工作变得更加流畅、高效！
2025-02-21 17:43:53
989
原创 深入理解 Next.js 中的 Image 组件：优化图片加载与显示的利器
Next.js 的Image组件为开发者提供了一系列强大的功能，帮助优化图片加载性能和用户体验。通过合理配置priorityqualitysizesobjectFit等参数，你可以在不同场景下灵活应对各种需求，确保图片加载高效、快速且视觉效果良好。如果你还没有开始使用Image组件，赶快在你的项目中试试这些优化技巧吧！
2025-02-20 23:51:29
872
原创 Git命令详解与工作流介绍：全面掌握版本控制系统的操作指南
以下图示显示了工作目录、暂存环境、本地代码库和远程代码库的位置，以及将数据移动到每个位置的git命令。以下部分描述创建本地代码库、将远程代码库下载（克隆）到本地计算机以及使用远程代码库的更改更新本地代码库的git命令。远程代码库是网络上的Git代码库，是特定项目下所有内容的唯一真实来源。命令从远程代码库更新本地代码库，使本地目录与其他开发人员的工作保持同步。将所有提交到本地代码库的内容上传到与当前工作目录关联的默认远程代码库。下载来自远程代码库的更新资产，但不会合并本地代码库中的分支中的增量。
2025-02-20 16:00:34
729
原创 Linux系统管理员常用命令汇总与实用指南
本备忘单提供了一系列命令行可执行文件，开发人员在运行Linux操作系统的计算机上经常使用这些命令。命令按类别组织。
2025-02-20 15:50:03
623
1
原创 高效管理 React 状态和交互：我的自定义 Hooks 实践
在 React 中，Hooks 是一种使我们能够在函数组件中使用状态和副作用的强大工具。随着项目的增大，重复的逻辑可能会出现在多个组件中，这时使用自定义 Hooks 就非常合适。它们帮助我们将业务逻辑抽象成独立的功能模块，提升代码的可复用性和可维护性。本文将介绍一些常见的自定义 Hook 实践，包括数据获取、去抖、状态切换、本地存储管理和点击外部区域关闭组件等。通过这些自定义 Hook，我们能够高效管理应用的状态和交互逻辑。
2025-02-17 22:41:50
1091
原创 JavaScript 任务队列详解：Event Loop、宏任务与微任务
Event Loop 执行顺序执行同步代码（主线程上的任务）。执行所有微任务（Microtask Queue）。执行一个宏任务（Macrotask Queue）。回到步骤 2，执行所有新的微任务。继续执行宏任务队列中的下一个任务。优先级对比微任务 > 宏任务（微任务会在每个宏任务前全部执行完）。多个微任务会按照添加顺序执行。多个宏任务也是按照添加顺序执行。掌握事件循环（Event Loop）
2025-02-17 16:30:06
1422
原创 React 什么是抽象组件及为什么要抽象组件
为什么要使用它，以及如何在项目中应用，让你的代码更可读、更易维护。如果项目中有多个按钮，样式和逻辑类似，但文本不同，就可以抽象出一个。是封装通用 UI 结构或逻辑，使其可复用，提高代码的可维护性。如果多个页面都有相同的布局（比如都有导航栏、页脚），可以抽象。——让组件适用于不同场景，而不是写死在某个业务逻辑中。，这样可以减少代码重复，提高组件的通用性。——使组件更独立，不受特定数据结构的限制。当你的代码看起来重复、难以维护，就是时候。这样代码重复率高，维护起来不方便。代码重复，每个页面都写。
2025-02-09 17:18:28
1097
原创 如何通过命令行解锁 macOS Gatekeeper（并恢复默认设置）
Gatekeeper 是 macOS 中的一项安全机制，它会阻止没有通过 Apple 审核的应用程序运行。默认情况下，Gatekeeper 只允许安装来自或经过 Apple Developer ID 认证的开发者的应用程序。
2024-12-17 14:15:00
2426
原创 系统完整性保护 (SIP) 及其启用/禁用的详细指南
Apple 在 macOS El Capitan (10.11) 中引入了 SIP（系统完整性保护），旨在保护系统文件、核心扩展和某些进程免受恶意软件或用户误操作的干扰。通过 SIP，Apple 提供了更强大的系统安全保护，但也限制了用户对文件和进程的控制能力。（系统完整性保护），通过限制对系统文件、目录和进程的修改，保护 macOS 的完整性。要修改 SIP，您必须在「恢复模式」中执行操作，而不是在正常的 macOS 系统中。在终端中，您可以根据自己的需求，选择以下两种常见的 SIP 修改方式。
2024-12-17 13:15:33
4285
原创 学习 Dockerfile 常用指令
在构建 Docker 镜像时，Dockerfile 文件是一份至关重要的配置文件，它定义了构建镜像的所有步骤。通过在 Dockerfile 中使用不同的指令（命令），我们可以控制镜像的构建过程、设置环境、指定执行命令等。本文将为你详细介绍 Dockerfile 中常用的指令及其用途，帮助你更好地理解和使用
2024-12-15 16:34:45
1427
原创 Docker 常用命令大全
通过掌握这些常用的 Docker 命令，你可以更高效地管理 Docker 环境，优化工作流程，提升开发与运维效率。随着项目的规模不断扩大，合理地管理 Docker 容器和镜像资源变得至关重要。希望本文的总结对你有所帮助，进一步提升你使用 Docker 的技能。如果有任何疑问或建议，欢迎在评论区留言讨论！
2024-12-15 16:30:00
1389
VSCode 编辑器快捷键大全及其高效开发应用场景
2025-02-21
Git命令详解与工作流介绍：全面掌握版本控制系统的操作指南
2025-02-20
Linux系统管理员常用命令汇总与实用指南
2025-02-20
OpenCV for Unity v2.4.6
2024-04-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人