过来看，高度过渡动画最优解

我们在做 height 从 0 到自动高度动画的时候经常会感到烦恼，原本以为从height：0到height：auto可以解决，但是实际却不是这样，该问题很久之前就有人在 github 上提过该 issues，但一直没有得到有效解答。

github.com/w3c/csswg-d…

为此广大的程序员目前有以下解决方案：

max-height

<div class="select">
  <div>select</div>
  <div class="option">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
</div>

.option {
  max-height: 0;
  overflow: hidden;
  transition: all 0.35s;
  background-color: rgb(43, 128, 226);
}
.select:hover .option {
  max-height: 800px;
}

缺点：一般情况下由于 max-height 尽可能的设置大一些， max-height 确定，max-height 从 0 到设置的最大高度过渡时间确定，就意味着速度确定，对于实际 height 小的，意味着距离短，所花费的时间就短，让你看起来动画就特别快，设置相同该 keyframes 但 height 比较大的动画看起来就比较慢。所以高度不同的元素设置同一个 animate，表现出的动画时间是不一样的。

grid

利用grid-template-rows属性来控制内部空间的大小从而实现高度从 0 到自动的动画

<div class="select">
  <div>select</div>
  <div class="option">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
</div>

.option {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
  background-color: rgb(43, 128, 226);
}
.option ul {
  overflow: hidden;
}
.select:hover .option {
  grid-template-rows: 1fr;
}

✨ 注意： class 为 option 的这层与需要展示的元素 li 之间必须有一个盒子将所有要展示的东西包裹起来，并设置 overflow: hidden。

w3c 新标准css方法 calc-size

文章开始说过，该动画问题在很久已经提出，但是在今年四月的时候重新打开并修复该问题，接下来我们看看怎么处理的。

当前谷歌浏览器版本为 127.0.6533.73（chrome 浏览器从 123 主版本已经开始测试该方法）

由于该css方法还是测试版本，我们需要配置浏览器让浏览器支持，Chorme 浏览器打开配置chrome://flags/，搜索Web Platform，找到Experimental Web Platform features，修改为启用，然后重启浏览器。

.option {
  height: 0;
  overflow: hidden;
  transition: all 0.35s;
  background-color: rgb(43, 128, 226);
}
.select:hover .option {
  height: calc-size(auto);
}

好了，到此结束，哈哈哈哈哈，就这么简单。但是一看calc就想到计算方法，同样calc-size也支持计算。

height: calc-size(auto, size * 2);

该写法为默认高度的 2 倍。