docs: add 2024/phase-4 to nav and create phase-4.md with View Transit…

…ions API intro

.vitepress/config.mts

@@ -22,11 +22,14 @@ export default defineConfig({
       {
         text: "2024 年",
         items: [
+          {
+            text: "2024/phase-4",
+            link: "2024/phase-4",
+          },
           {
             text: "2024/phase-3",
             link: "2024/phase-3",
           },
-
           {
             text: "2024/phase-2",
             link: "2024/phase-2",

2024/phase-4.md

@@ -1,6 +1,6 @@
 # 前端周刊：2024-4 期
 
-[![](/img/bing/20240408.jpeg?imageView2/2/w/960)](https://www.bing.com/search?q=%E8%A5%BF%E6%AC%A7%E5%88%BA%E7%8C%AC)
+[![](/img/bing/20240920.jpg?imageView2/2/w/960)](https://www.bing.com/search?q=%e5%a5%a5%e5%85%8b%e6%8b%89%e7%a7%91%e5%85%8b%e7%81%af%e5%a1%94&form=hpcapt&filters=HpDate:%2220240919_1600%22)
 
 ## 前端开发
 
@@ -28,6 +28,14 @@
 
 > 本文介绍 View Transitions API，可以实现类似 Keynote 里面神奇移动这样的动画效果，也即是浏览器自动识别场景 1 和场景 2 的不同，并让这个不同产生动画效果，特别适合复杂的页面级别的场景切换动画。
 
+- [phosphoricons 图标库](https://phosphoricons.com/)
+
+> 一个开源的图标库，支持 React、Vue、Svelte、Angular、Lit 等多种框架
+
+- [magicui 动效组件库](https://magicui.design/docs)
+
+> 一个 React 动效组件库
+
 ## 行业周边
 
 - [【七牛云】新人免费试用](https://s.qiniu.com/vmUnIr)