最近自己的个人网站想做个折叠展开的动画效果，但是由于内容子元素的高度不确定， CSS 的 height:auto 无法直接实现该动画效果。问了群里的朋友，有的说自己用 JS 去计算高度，有的说用 max-height 去代替，但是没有一个人说到最简单的方法。后来我自己网上搜到了这个方法，肯定还有很多人不知道。

效果

gif 图看起来很模糊，但是实际很流畅，因为是完全用 CSS 实现的， JS 只负责更改样式，没有参与动画计算。

intelyes.club/#/word/n2-l…

我的网站很多地方都用到了这个动画效果。

具体实现

用 grid 布局的 grid-template-rows 属性去实现，使 grid-template-rows 的值从 0fr 变为 1fr ，即可实现该动画效果。

核心代码如下：

<div class="auto-height">
    <div class="box">
        <div class="content">
            从0到auto
        </div>
    </div>
</div>

.auto-height {
    display: grid;
    grid-template-rows: 1fr; /* 控制该属性的值即可 */
    transition: 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.box {
    overflow: hidden;
}

.content {
    padding: 8px;
}

grid-template-rows 动画目前只在 Chrome 107 以上版本支持，在低于该版本的浏览器上无法显示出该动画。不过希望大家能够记住该方法，过几年后就不要再用 JS 去计算高度来实现该动画了。

其他方法

对于低于 107 内核版本的浏览器，用 Angular 动画库提供的方案完全没问题，而且写起来也非常容易，一句话的事。

angular.cn/api/animati…

具体代码：

<button (click)="flag = !flag">打开/关闭</button>
<div class="block">
  <div class="auto-height" [@toggle]="flag ? 'open' : 'close'">
    <div class="content">
      从0到auto
    </div>
  </div>
</div>
<div class="block">
  <div class="content">AAABBBCCC</div>
  <div class="content">DDDEEEFFF</div>
  <div class="auto-height" [@toggle]="flag ? 'open' : 'close'">
    <div class="content">
      从0到auto<br />
      从0到auto
    </div>
  </div>
</div>

.block {
    margin: 16px 8px;
    border: 1px solid #333333;
}

.auto-height {
    background: #ccc;
    overflow: hidden;
}

.content {
    padding: 8px;
}

import { Component } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  animations: [
    trigger('toggle', [
      state('open', style({
        height: '*',
      })),
      state('close', style({
        height: '0',
      })),
      transition('open => close', animate('0.5s cubic-bezier(0.645, 0.045, 0.355, 1)')),
      transition('close => open', animate('0.5s cubic-bezier(0.645, 0.045, 0.355, 1)')),
    ]),
  ],
})
export class AppComponent {

  flag: boolean = true;

}

所以不要看什么 Angular 落后， Angular 没跟上函数式趋势， Angular 还在死守面向对象， Angular 门槛高啥的。作为 6 年 Angular 框架使用者，我只想说用了 Angular ，工程化不需要自己操心，风格规范不需要自己操心，用什么轮子也不需要自己操心。Angular 是在认真提高开发者的工作效率，而不是在刷无意义的 KPI，或者说是去创造茴字的各种写法。

总结

本文不在于卷，不在于秀技术，仅仅分享下个人笔记，同时也让更多的人了解到 CSS 的活用方法。

原文链接：https://juejin.cn/post/7333986476030820362 作者：CrimsonHu