From a956928012983e6645c9ffc815841dec76f8ea18 Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Sun, 16 Mar 2025 10:22:12 +0800
Subject: docs(draft): update

Former-commit-id: e6bbb923e4058d8766ca74df107f5cea22fb9842
---
 ...\344\272\272\345\221\250\345\210\212-vol-20.md" | 55 +++++++++++++++++++++-
 1 file changed, 54 insertions(+), 1 deletion(-)

(limited to 'content/posts')

diff --git "a/content/posts/\347\250\273\350\215\211\344\272\272\345\221\250\345\210\212-vol-20.md" "b/content/posts/\347\250\273\350\215\211\344\272\272\345\221\250\345\210\212-vol-20.md"
index c8c17976..b9bbe283 100644
--- "a/content/posts/\347\250\273\350\215\211\344\272\272\345\221\250\345\210\212-vol-20.md"
+++ "b/content/posts/\347\250\273\350\215\211\344\272\272\345\221\250\345\210\212-vol-20.md"
@@ -1,5 +1,5 @@
 ---
-title: 稻草人周刊 Vol.
+title: 稻草人周刊 Vol.20
 subtitle: 
 description: 
 tags:
@@ -16,6 +16,16 @@ toc: true
 
 ## 🧑‍💻 这周做了什么？
 
+移除了博客的 [swup.js](https://swup.js.org)，使用 CSS 的新特性 View Transition 实现了非常丝滑的页面切换，我愿称之为年度最伟大的 CSS API。要实现 View Transition，你只需要：
+
+```css
+@view-transition {
+  navigation: auto;
+}
+```
+
+大功告成！如果想要了解更多，请继续阅读周刊后面的内容。
+
 ## 📚 这周读了什么？
 
 ## 🧠 这周思考了什么？
@@ -37,8 +47,51 @@ Pippin Barr 做了一个叫做「[It is as if you were on your phone](https://pi
 
 虽然最好的方法其实是避免无意义社交，积极参与有意义的社交，但人也有身不由己的时候，如果不想被打扰又不想刷其他无意义的信息，这款游戏说不定能让你在什么都不做的情况下逃避社交。
 
+### 收藏知识的后续动作？
+
+Xiaoxiao 写了一篇《[关于收藏知识的后续动作](https://liuyuntian.com/2025/03/13/subsequent-actions-regarding-collecting-knowledge.html)》，他发现自己过去十几年收集的好文章，如今看来大部分都过时了，一方面是因为技术和趋势变化太快，另一方面是因为这些知识一直没有被转化为自己的东西。
+
+作者指出，对于收藏的知识，应该定期回顾，删除没有用的内容，及时总结输出，才能内化，让有用的知识变成自己的。
+
+而我在想，能不能完全移除「收藏知识」这一步？因为收藏就意味着告诉自己「我可以一会再看」，到最后回顾这些收藏项目就会变得非常痛苦。如果能在当下就稍微多花几分钟，将读到的、听见到的、看到的，及时地用自己的话写成笔记，而不是「收藏」，兴许会好很多。
+
+
+
 ## 💡 这周学到了什么？
 
+### View Transition
+
+CSS 的 View Transition API 其实在 2023 年上半年就已经开始测试了，如今已经被大多数现代浏览器支持（除了火狐）。
+
+![image-20250316100620618](https://image.guhub.cn/uPic/2025/03/image-20250316100620618.png)
+
+你只需要在网站的 CSS 文件中加上：
+
+```css
+@view-transition {
+  navigation: auto;
+}
+```
+
+浏览器就能自动帮你实现简单的渐变切页效果，而且非常丝滑，已经足够应付大部分场景了。如果你想要更细致的切页动画，比如现在从本站首页点击文章链接，就能看到链接丝滑地过渡为页面文章标题的动效，你只需要额外为这些元素添加 `view-transition-name` 属性就可以了。
+
+```html
+<!-- 在文章列表中 -->
+<a 
+   href="/post/xxx" 
+   style="view-transition-name: post-xxx"
+>文章标题</a>
+
+<!-- 在文章页面中 -->
+<header style="view-transition-name: post-xxx">
+	<h1>文章标题</h1>
+</header>
+```
+
+关于 View Transition，如果想要了解更多，可以阅读 [Dave 的博客](https://daverupert.com/2023/05/getting-started-view-transitions/)，他也用这个 API 在博客上实现了许多酷炫的切换效果。
+
+Jim Nielsen 也在他的博客提出了用很多小 HTML 页面作为组件，利用 View Transition 实现很多原本要用到 JavaScript 才能实现的效果，比如下拉菜单。如果你感兴趣，可以阅读[他的博客文章](https://blog.jim-nielsen.com/2025/lots-of-little-html-pages/)，我觉得非常有意思。前端在减少 JavsScript 代码数量上又前进了一大步！
+
 ---
 
 ## 🗣️ 碎碎念
\ No newline at end of file
-- 
cgit v1.2.3