呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
#优质博文 #资源推荐 #tools
给你的 Markdown 挑挑刺——语法检查器入门与进阶
摘要: 本文介绍了Markdown语法检查器的重要性和两种主要类型的检查器：markdownlint和AutoCorrect。markdownlint专注于检查和自动修复Markdown文档中的语法和格式问题，包括规范空格、链接使用和具体样式等。它有网页版、VSCode插件和命令行工具，适合不同用户需求。AutoCorrect则专门处理中文Markdown文档中的中英文间空格问题。文章强调，虽然许多人会使用Markdown，但真正写得好的并不多，这些工具可以帮助提高Markdown文档的质量和一致性。
via 少数派 PlatyHsu
给你的 Markdown 挑挑刺——语法检查器入门与进阶
摘要: 本文介绍了Markdown语法检查器的重要性和两种主要类型的检查器：markdownlint和AutoCorrect。markdownlint专注于检查和自动修复Markdown文档中的语法和格式问题，包括规范空格、链接使用和具体样式等。它有网页版、VSCode插件和命令行工具，适合不同用户需求。AutoCorrect则专门处理中文Markdown文档中的中英文间空格问题。文章强调，虽然许多人会使用Markdown，但真正写得好的并不多，这些工具可以帮助提高Markdown文档的质量和一致性。
via 少数派 PlatyHsu
少数派 - 高品质数字消费指南
给你的 Markdown 挑挑刺——语法检查器入门与进阶 ｜ 少数派会员 π+Prime
会写 Markdown 的人很多，但写得好 Markdown 的人却很少。有没有什么工具能充当「秘书」，检查文件中的 Markdown 语法和风格，并且提出解决方案、自动修复问题，甚至自动补齐中英文之间的「盘古之白」呢？本文介绍的 Markdown 语法检查器（linter）就能做到。
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 281 期）：新基建的政策选择
1. JavaScript 中验证 URL 的新方法（英文） 📓 JS 新增了一个
2. Cloudscape 🧰 一个 React 组件库，专为云产品设计的。 #组件库
3. TinyLD 🧰 一个 JS 库，用来判断一段文字是什么语言（汉语、英语、日语等等）。
4. VineJS 🧰 一个 Node.js 的表单验证库，只用于后端，支持大量验证规则，验证速度快。
5. AI Image Captions 🧰 一个在线工具，可以为图片生成介绍词，用于社交媒体，可以指定语言、风格和长度。 #AI
6. IP 工具箱 🧰 一个开源的本地网站，集成了 IP 相关的各种查询。
7. GoMusic 🧰 音乐迁移助手，将网易云音乐、QQ 音乐的歌单，迁移至 Apple/Youtube/Spotify Music。
8. 33 字幕 🧰 一个 Win/Mac 桌面软件，用于识别/制作音频和视频文件的双语字幕。
9. vue-draggable-plus 🧰 Vue2 & Vue3 的拖拽组件。
10. LLM 可视化 📓 这个网站提供大型语言模型（LLM）原理讲解，每一步讲解都在右侧配上动画。 【这个好牛掰】
科技爱好者周刊（第 281 期）：新基建的政策选择
1. JavaScript 中验证 URL 的新方法（英文） 📓 JS 新增了一个
URL.canParse() 方法，可以验证字符串是否为有效 URL。 #新标准2. Cloudscape 🧰 一个 React 组件库，专为云产品设计的。 #组件库
3. TinyLD 🧰 一个 JS 库，用来判断一段文字是什么语言（汉语、英语、日语等等）。
4. VineJS 🧰 一个 Node.js 的表单验证库，只用于后端，支持大量验证规则，验证速度快。
5. AI Image Captions 🧰 一个在线工具，可以为图片生成介绍词，用于社交媒体，可以指定语言、风格和长度。 #AI
6. IP 工具箱 🧰 一个开源的本地网站，集成了 IP 相关的各种查询。
7. GoMusic 🧰 音乐迁移助手，将网易云音乐、QQ 音乐的歌单，迁移至 Apple/Youtube/Spotify Music。
8. 33 字幕 🧰 一个 Win/Mac 桌面软件，用于识别/制作音频和视频文件的双语字幕。
9. vue-draggable-plus 🧰 Vue2 & Vue3 的拖拽组件。
10. LLM 可视化 📓 这个网站提供大型语言模型（LLM）原理讲解，每一步讲解都在右侧配上动画。 【这个好牛掰】
Stefanjudis
How to validate URLs in JavaScript (2023 edition)
Learn how to validate URLs with the new static JavaScript method `URL.canParse`.
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 280 期）：机器点餐与宅文化
1. Biome 🧰 JS 语言格式化工具 Prettier，提出谁能用 Rust 语言重新实现它，并通过所有测试用例，就能获得2万美元，因为它们自己没有资源做这件事。结果，只过了两个星期，Biome 就赢得了这场比赛。Biome 是一个 JS 工具箱，零配置就能实现 JS 脚本的格式化和 Lint，性能出众。#工程化
【草，太牛了】
2. Gmeek 🧰 超轻量级个人博客模板，将 GitHub 的 issue 转成博客网站。 #建站
3. TQUIC 🧰 腾讯对 QUIC 协议的实现，新开源的 QUIC 库，参考介绍文章。
4. ai-teacher 🧰 一个 ChatGPT 的前端开发示例，可以当作代码参考。 #chatgpt #AI
5. DevOpsGPT 🧰 一个 LLM 应用，根据根据需求生成开发文档，然后生成软件代码。
6. SDXL Turbo 体验站 🧰 免费使用 SDXL Turbo 模型，快速文生图，基本没有等待。
7. 、生成式 AI 初学者教程（Generative AI for Beginners） 📓 微软推出的入门课程，介绍生成式 AI，一共12课。
科技爱好者周刊（第 280 期）：机器点餐与宅文化
1. Biome 🧰 JS 语言格式化工具 Prettier，提出谁能用 Rust 语言重新实现它，并通过所有测试用例，就能获得2万美元，因为它们自己没有资源做这件事。结果，只过了两个星期，Biome 就赢得了这场比赛。Biome 是一个 JS 工具箱，零配置就能实现 JS 脚本的格式化和 Lint，性能出众。#工程化
【草，太牛了】
2. Gmeek 🧰 超轻量级个人博客模板，将 GitHub 的 issue 转成博客网站。 #建站
3. TQUIC 🧰 腾讯对 QUIC 协议的实现，新开源的 QUIC 库，参考介绍文章。
4. ai-teacher 🧰 一个 ChatGPT 的前端开发示例，可以当作代码参考。 #chatgpt #AI
5. DevOpsGPT 🧰 一个 LLM 应用，根据根据需求生成开发文档，然后生成软件代码。
6. SDXL Turbo 体验站 🧰 免费使用 SDXL Turbo 模型，快速文生图，基本没有等待。
7. 、生成式 AI 初学者教程（Generative AI for Beginners） 📓 微软推出的入门课程，介绍生成式 AI，一共12课。
Biome
Format, lint, and more in a fraction of a second.
#优质博文 #前端 #webGL
尝试用 three.js 实现了这个跨窗口的粒子动画
摘要: 本文介绍了作者如何使用 three.js 实现一个复杂的跨窗口粒子动画。作者首先采用了
via 掘金@alphardex
尝试用 three.js 实现了这个跨窗口的粒子动画
摘要: 本文介绍了作者如何使用 three.js 实现一个复杂的跨窗口粒子动画。作者首先采用了
GPGPU 技术，以处理大量粒子而不影响性能。创建 GPGPU 对象和数据纹理来存储 GPU 需要计算的数据，并使用计算着色器来处理变量的计算逻辑。粒子的本体通过 THREE.Points 和自定义的 BufferGeometry 实现，搭配自定义着色器材质 ShaderMaterial。作者还探索了如何制作拉伸球动画，并使用开源的 WindowManager 实现粒子球体的纠缠效果。尽管动画效果尚需优化，但文章展示了 three.js 在复杂动画制作中的强大功能。via 掘金@alphardex
#优质博文 #前端 #webGL
GPU-Accelerated Particles with WebGL 2
摘要: 本文深入探讨如何使用WebGL 2实现GPU加速的粒子系统。WebGL 2基于GL ES 3，提供了许多新特性，其中包括变换反馈（transform feedback）。粒子系统包括一系列独立的实体（粒子），每个粒子通过一组参数（如位置、速度、寿命等）来描述。文章阐述了在GPU上模拟大量粒子的优势，如利用并行处理来更新多个粒子，以及不需要每帧都上传更新数据。通过变换反馈，可以捕获顶点着色器输出的数据，用于后续处理。实现过程中包括两个GL程序：一个用于更新粒子状态，另一个用于渲染粒子。这种方法显著提高了处理粒子系统的效率。
via gpfault.net
--------------
【你问我为啥看这个？别提了说起来都是泪】
GPU-Accelerated Particles with WebGL 2
摘要: 本文深入探讨如何使用WebGL 2实现GPU加速的粒子系统。WebGL 2基于GL ES 3，提供了许多新特性，其中包括变换反馈（transform feedback）。粒子系统包括一系列独立的实体（粒子），每个粒子通过一组参数（如位置、速度、寿命等）来描述。文章阐述了在GPU上模拟大量粒子的优势，如利用并行处理来更新多个粒子，以及不需要每帧都上传更新数据。通过变换反馈，可以捕获顶点着色器输出的数据，用于后续处理。实现过程中包括两个GL程序：一个用于更新粒子状态，另一个用于渲染粒子。这种方法显著提高了处理粒子系统的效率。
via gpfault.net
--------------
【你问我为啥看这个？别提了说起来都是泪】
#优质博文
我在Google的18年：屠龙少年终成恶龙
这篇文章详细描述了一位Google前员工从 2005 年加入公司到 2023 年离职的经历。文章以第一人称视角，从最早的 Google 黄金时代讲起，早期的 Google 将 “不作恶” 一直贯穿到底，是工程师的天堂。随着时间的推移，Google 的文化开始逐渐蒸发。决策考量从用户利益变成了公司利益，后来只考量决策者的个人利益。最后为了确保股价的增长开始裁员。
via 公众号 编程技术宇宙
我在Google的18年：屠龙少年终成恶龙
这篇文章详细描述了一位Google前员工从 2005 年加入公司到 2023 年离职的经历。文章以第一人称视角，从最早的 Google 黄金时代讲起，早期的 Google 将 “不作恶” 一直贯穿到底，是工程师的天堂。随着时间的推移，Google 的文化开始逐渐蒸发。决策考量从用户利益变成了公司利益，后来只考量决策者的个人利益。最后为了确保股价的增长开始裁员。
via 公众号 编程技术宇宙
#优质博文 #前端 #阮一峰的科技周刊 #资源推荐 #tools
科技爱好者周刊（第 279 期）：网络社区的悲剧
1. React 服务器组件的体会（英文） 📓 React 框架最早是客户端渲染（CSR），后来增加了服务器渲染（SSR），现在又开始推广服务器组件（RSC）。作者最近迁移到服务器组件，这篇长文就是他的感想，并给出了使用建议。 #react
2. curl 支持 IPFS 协议（英文）📓 老牌工具 curl 最近开始支持抓取 IPFS 协议的网页，本文介绍一些背后的考虑，具体用法参考文档。
3. Target="_Blank" 属性的安全漏洞（中文） 📓 一篇老文章，介绍网页<a>标签的target="_blank"属性打开新窗口时，会使得新窗口可以引用原始窗口，因此可能有安全风险。 解决方法为加上
4. Easydict 🧰 一个 macOS 平台的桌面应用，能够查找单词和翻译文本，并支持划词翻译和 OCR 截图翻译，可以配置后台词典和翻译服务，代码开源。
5. 百词斩网页助手 🧰 一个浏览器扩展，支持取词翻译、收藏单词等操作，可以与背单词 App"百词斩"配合使用，建立自己的单词本。
6. Elog 🧰 该工具可以将写作平台（语雀/飞书/Notion/FlowUs）的内容，发布到博客平台（Hexo/Vitepress/Confluence/WordPress）等。
科技爱好者周刊（第 279 期）：网络社区的悲剧
1. React 服务器组件的体会（英文） 📓 React 框架最早是客户端渲染（CSR），后来增加了服务器渲染（SSR），现在又开始推广服务器组件（RSC）。作者最近迁移到服务器组件，这篇长文就是他的感想，并给出了使用建议。 #react
2. curl 支持 IPFS 协议（英文）📓 老牌工具 curl 最近开始支持抓取 IPFS 协议的网页，本文介绍一些背后的考虑，具体用法参考文档。
3. Target="_Blank" 属性的安全漏洞（中文） 📓 一篇老文章，介绍网页<a>标签的target="_blank"属性打开新窗口时，会使得新窗口可以引用原始窗口，因此可能有安全风险。 解决方法为加上
rel="noopener noreferrer" 如
<a href="https://hashnode.com/devblog" target="_blank" rel="noopener noreferrer">
Create your Devblog today
</a>4. Easydict 🧰 一个 macOS 平台的桌面应用，能够查找单词和翻译文本，并支持划词翻译和 OCR 截图翻译，可以配置后台词典和翻译服务，代码开源。
5. 百词斩网页助手 🧰 一个浏览器扩展，支持取词翻译、收藏单词等操作，可以与背单词 App"百词斩"配合使用，建立自己的单词本。
6. Elog 🧰 该工具可以将写作平台（语雀/飞书/Notion/FlowUs）的内容，发布到博客平台（Hexo/Vitepress/Confluence/WordPress）等。
#优质博文 #前端 #react
Breaking React Query's API on Purpose
今天发现React Query v5 把 useQuery 的 onSuccess等回调函数给扬了
相关RFC: RFC: remove callbacks from useQuery #5279
AI 摘要: 文章讨论了React Query v5中对useQuery回调函数的移除决定。作者指出，设计API是个挑战，因为它需要在灵活性、简洁性和直观性之间找到平衡。React Query v5决定移除useQuery的 onSuccess、onError和onSettled 回调函数，因为它们在实践中会导致不一致和错误。这些回调虽然看似直观，但在多组件使用时会产生重复的副作用。作者提出，使用全局缓存级别的回调和meta字段是更好的替代方案，可以避免状态同步和渲染周期中的数据不一致问题。此外，文章还指出，即便在特殊情况下需要状态同步，也应该谨慎使用useEffect钩子来保证数据一致性。总体上，文章强调API应该简单、直观且一致，而useQuery的现有回调方式存在潜在的问题，因此选择移除它们。
via TkDodo's blog
Breaking React Query's API on Purpose
今天发现React Query v5 把 useQuery 的 onSuccess等回调函数给扬了
相关RFC: RFC: remove callbacks from useQuery #5279
AI 摘要: 文章讨论了React Query v5中对useQuery回调函数的移除决定。作者指出，设计API是个挑战，因为它需要在灵活性、简洁性和直观性之间找到平衡。React Query v5决定移除useQuery的 onSuccess、onError和onSettled 回调函数，因为它们在实践中会导致不一致和错误。这些回调虽然看似直观，但在多组件使用时会产生重复的副作用。作者提出，使用全局缓存级别的回调和meta字段是更好的替代方案，可以避免状态同步和渲染周期中的数据不一致问题。此外，文章还指出，即便在特殊情况下需要状态同步，也应该谨慎使用useEffect钩子来保证数据一致性。总体上，文章强调API应该简单、直观且一致，而useQuery的现有回调方式存在潜在的问题，因此选择移除它们。
via TkDodo's blog
tkdodo.eu
Breaking React Query's API on purpose
Why good API design matters, even if it means breaking existing APIs in the face of resistance.
#优质博文 #前端 #react
React Reconciliation: How It Works and Why We Should Care
AI 摘要: 本文由Nadia Makarevich撰写，深入探讨了React的协调（reconciliation）算法及其对日常编码的影响，特别关注条件渲染、"key"属性以及为什么不应在其他组件内声明组件的问题。文章通过实例说明了React是如何通过虚拟DOM（Virtual DOM）管理组件的渲染，以及状态更新时如何影响DOM元素。文章还解释了在数组中使用"key"属性的重要性，它在React中充当元素的唯一标识符，用于在重新渲染时区分不同的元素，即使它们的位置在数组中发生变化。
via Developer Way
React Reconciliation: How It Works and Why We Should Care
AI 摘要: 本文由Nadia Makarevich撰写，深入探讨了React的协调（reconciliation）算法及其对日常编码的影响，特别关注条件渲染、"key"属性以及为什么不应在其他组件内声明组件的问题。文章通过实例说明了React是如何通过虚拟DOM（Virtual DOM）管理组件的渲染，以及状态更新时如何影响DOM元素。文章还解释了在数组中使用"key"属性的重要性，它在React中充当元素的唯一标识符，用于在重新渲染时区分不同的元素，即使它们的位置在数组中发生变化。
via Developer Way
Developerway
React reconciliation: how it works and why should we care
Looking in detail into how React reconciliation algorithm works. Explore in the process quirks of conditional rendering, the 'key' attribute, and why we shouldn't declare components inside other components.
#资源推荐 #AI #chatgpt #tools #爬虫
BuilderIO/gpt-crawler: 一个开源的知识库自动爬虫工具
该项目可以从指定的 URL 爬取网站内容，生成知识文件，用于创建定制的 GPT 模型（GPTs）。支持从一个或多个 URL 爬取数据，并且已经在实践中应用，例如通过爬取 Builder.io 的文档来回答有关如何使用和集成 Builder.io 的问题。
使用该工具需要遵循以下步骤：首先确保安装了 Node.js（版本 16 或更高），然后克隆仓库、安装依赖项（包括 Playwright，如果未安装），并配置爬虫。用户可以自定义配置文件
这个生成的文件可以用于创建自定义的 GPT 模型。用户可以选择通过 UI 上传该文件以创建可共享的 GPT 模型，也可以通过 API 上传以集成到产品中。对于 UI 方式，用户需要访问 OpenAI 的 ChatGPT 网站，上传文件，并通过 "My GPTs" 菜单创建和配置自定义 GPT。对于 API 方式，用户需要访问 OpenAI 的平台网站，创建新的助手，并上传文件。
BuilderIO/gpt-crawler: 一个开源的知识库自动爬虫工具
该项目可以从指定的 URL 爬取网站内容，生成知识文件，用于创建定制的 GPT 模型（GPTs）。支持从一个或多个 URL 爬取数据，并且已经在实践中应用，例如通过爬取 Builder.io 的文档来回答有关如何使用和集成 Builder.io 的问题。
使用该工具需要遵循以下步骤：首先确保安装了 Node.js（版本 16 或更高），然后克隆仓库、安装依赖项（包括 Playwright，如果未安装），并配置爬虫。用户可以自定义配置文件
config.ts`，以指定要爬取的 URL、匹配模式、选择器、最大爬取页面数等。完成配置后，运行爬虫，它将生成一个名为 `output.json 的文件。这个生成的文件可以用于创建自定义的 GPT 模型。用户可以选择通过 UI 上传该文件以创建可共享的 GPT 模型，也可以通过 API 上传以集成到产品中。对于 UI 方式，用户需要访问 OpenAI 的 ChatGPT 网站，上传文件，并通过 "My GPTs" 菜单创建和配置自定义 GPT。对于 API 方式，用户需要访问 OpenAI 的平台网站，创建新的助手，并上传文件。
GitHub
GitHub - BuilderIO/gpt-crawler: Crawl a site to generate knowledge files to create your own custom GPT from a URL
Crawl a site to generate knowledge files to create your own custom GPT from a URL - BuilderIO/gpt-crawler
#优质博文 #前端 #react
「React 进阶」React 优雅的捕获并处理渲染异常
评：这篇文章偏向于类组件，虽然我是更喜欢ErrorBoundary，但是这个mark一下吧也
AI 摘要: 这篇文章讨论了在 React 应用中如何优雅地捕获并处理渲染异常。文章首先指出，在 React 中使用 JSX 语法虽然带来了灵活性和便利，但也容易出现渲染异常，如空指针错误，导致页面白屏。为解决这一问题，文章介绍了两种主要方法：使用
1.
2. HOC（高阶组件）：为了处理大量组件的异常，文章提出了创建一个通用的高阶组件来封装可能出现渲染异常的核心组件。这种方法可以批量处理渲染异常，增强了代码的复用性。
最后，文章还探讨了渲染异常的监控方法。作者提出了一种利用 context 和插槽组件的技术方案来监控渲染异常。这种方案允许检测到哪些组件在渲染过程中出现异常，从而帮助开发者更快地定位和解决问题。
总之，这篇文章为 React 开发者提供了一套完整的解决方案来优雅地处理和监控渲染异常，旨在提高应用的稳定性和用户体验。
via 公众号 前端Sharing
「React 进阶」React 优雅的捕获并处理渲染异常
评：这篇文章偏向于类组件，虽然我是更喜欢ErrorBoundary，但是这个mark一下吧也
AI 摘要: 这篇文章讨论了在 React 应用中如何优雅地捕获并处理渲染异常。文章首先指出，在 React 中使用 JSX 语法虽然带来了灵活性和便利，但也容易出现渲染异常，如空指针错误，导致页面白屏。为解决这一问题，文章介绍了两种主要方法：使用
componentDidCatch 和高阶组件（HOC）。1.
componentDidCatch：这是 React 类组件的生命周期方法，它可以捕获子组件树中的异常。文章通过实例展示了如何用 `componentDidCatch 将潜在的渲染异常从页面层面降低到组件层面，从而避免整个页面崩溃。2. HOC（高阶组件）：为了处理大量组件的异常，文章提出了创建一个通用的高阶组件来封装可能出现渲染异常的核心组件。这种方法可以批量处理渲染异常，增强了代码的复用性。
最后，文章还探讨了渲染异常的监控方法。作者提出了一种利用 context 和插槽组件的技术方案来监控渲染异常。这种方案允许检测到哪些组件在渲染过程中出现异常，从而帮助开发者更快地定位和解决问题。
总之，这篇文章为 React 开发者提供了一套完整的解决方案来优雅地处理和监控渲染异常，旨在提高应用的稳定性和用户体验。
via 公众号 前端Sharing
#优质博文 #前端 #css #新标准
快速了解 CSS @starting-style 规则
AI 摘要: 本文介绍了Chrome 117新推出的CSS @starting-style规则。这个规则允许定义元素的初始样式，使其在页面加载时即呈现动画效果。传统上，CSS动画依赖于状态变化来触发，如使用transition和animation。transition简单但需要状态变化，如添加类名。animation可自动运行，无需状态变化。@starting-style改变了这一局限，允许在元素渲染前设定初始状态，使transition可用于初始渲染动画。
文章还提及了一个常见问题：新添加的元素难以触发transition动画，因为元素在添加类名时尚未完全渲染。解决方法包括使用定时器、强制重绘或animation替代。@starting-style同样可解决此问题。
此外，@starting-style使display:none的元素也能支持过渡效果，这在之前是难以实现的。最后，作者指出，虽然@starting-style是一个有用的新特性，但可能不会广泛使用，因为它的功能可以被其他方法替代，且其正式应用时间尚不确定。作者通过具体示例和链接提供了实际效果展示，帮助读者更好地理解@starting-style的应用场景和优势。
via 公众号 前端侦探
快速了解 CSS @starting-style 规则
AI 摘要: 本文介绍了Chrome 117新推出的CSS @starting-style规则。这个规则允许定义元素的初始样式，使其在页面加载时即呈现动画效果。传统上，CSS动画依赖于状态变化来触发，如使用transition和animation。transition简单但需要状态变化，如添加类名。animation可自动运行，无需状态变化。@starting-style改变了这一局限，允许在元素渲染前设定初始状态，使transition可用于初始渲染动画。
文章还提及了一个常见问题：新添加的元素难以触发transition动画，因为元素在添加类名时尚未完全渲染。解决方法包括使用定时器、强制重绘或animation替代。@starting-style同样可解决此问题。
此外，@starting-style使display:none的元素也能支持过渡效果，这在之前是难以实现的。最后，作者指出，虽然@starting-style是一个有用的新特性，但可能不会广泛使用，因为它的功能可以被其他方法替代，且其正式应用时间尚不确定。作者通过具体示例和链接提供了实际效果展示，帮助读者更好地理解@starting-style的应用场景和优势。
via 公众号 前端侦探
