Add height animation

Author: fwqaaq

public/css/index.css

@@ -370,24 +370,23 @@ input {
     }
 
     /*权重需要比 .header-nav 大*/
-    nav.show {
-      max-height: 450px;
-      /* 与正常情况下产生冲突，这里设置 auto */
+    nav.header-nav.show {
       height: auto;
+      height: calc-size(auto, size);
     }
 
     .header-nav {
+      width: 100%;
+      height: 0;
       display: flex;
       flex-direction: column;
       position: fixed;
       background-color: var(--header-bg);
       backdrop-filter: blur(1rem);
       -webkit-backdrop-filter: blur(1rem);
       inset-block-start: var(--header-height);
-      width: 100%;
-      max-height: 0;
       overflow: hidden;
-      transition: max-height 0.5s ease;
+      transition: height 0.5s ease;
     }
   }
 

src/posts/TyepScript_tricky.md

@@ -26,8 +26,7 @@ summary: tsconfig.json 配置技巧
   }
   ```
 
-  - 此时编译后的文件会分别到 `dist/src1` 和 `dist/src2` 目录下。但是如果 `src1`
-    变化了，`src2` 同时也会再次被编译，这时候我们需要做一些缓存设置
+- 此时编译后的文件会分别到 `dist/src1` 和 `dist/src2` 目录下。但是如果 `src1` 变化了，`src2` 同时也会再次被编译，这时候我们需要做一些缓存设置
 
 1. 在 `src1` 和 `src2` 目录下分别创建 `tsconfig.json` 文件，其中需要添加
    `composite:true` 这样的配置

src/posts/css_animation.md

@@ -0,0 +1,19 @@
+---
+title: 动画效果
+date: 2024-12-30 08:30:03
+categories: CSS
+tags:
+   - CSS
+summary: 用于收集一些常见的 CSS 动画效果
+---
+
+## height 动画效果
+
+众所周知，在之前的 CSS 中，例如 height 属性是不能直接进行动画效果的，需要使用 max-height 配合 transition 或者 animation 来实现该效果。
+
+现在可以使用以下两个属性来实现 height 的动画效果：
+
+1. `calc-size(<calc-size-basis>, <calc-sum>)`: <https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size>，该函数可以接受两个属性，其中第一个属性是初始值，第二个属性是 CSS 数学函数中可计算的值，例如 `height: calc-size(auto, size + 100px);`。（该属性仅针对尺寸属性有效果）
+2. `interpolate-size`: <https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size>，该属性用于在 [`<length-percentage>`](https://developer.mozilla.org/en-US/docs/Web/CSS/length-percentage) 和[固有尺寸](https://developer.mozilla.org/en-US/docs/Glossary/Intrinsic_Size)之间使用 animation 和 transition 效果。接受两个关键字，一个是 `allow-keywords` 该属性接受某个[插值](https://developer.mozilla.org/zh-CN/docs/Glossary/Interpolation)，另一个是 `numeric-only`，该属性为**默认值**不接受插值。
+
+参见：<https://developer.chrome.com/docs/css-ui/animate-to-height-auto>、[`<calc-sum>`]((https://developer.mozilla.org/en-US/docs/Web/CSS/calc-sum))

src/util/utils.js

@@ -120,6 +120,7 @@ export function startServer(
   try {
     Deno.serve({
       port,
+      hostname: 'localhost',
       onListen({ hostname, port }) {
         console.log(`Server started at http://${hostname}:${port}`)
       },