CSS 如何让auto height完美支持过渡动画

CSS 如何让auto height完美支持过渡动画？

所周知，高度在设置成auto关键词时是不会触发transition过渡动画的，下面是伪代码

div{
  height: 0;
  transition: 1s
}
.wrap:hover div{
  height: auto
}

效果如下

如果希望展开时有过渡动画，例如这样

通常是借助 JS 动态去获取元素的高度（还有些麻烦的，需要渲染后才能知道高度）。其实CSS 也有一个巧用max-height适配动态高度的解决方案，下面是伪代码

div{
  max-height: 0;
  transition: 1s
}
.wrap :hover div{
  max-height: 800px /*大概的值，需要超过元素高度*/
}

有兴趣的可以参考这篇文章：CSS 奇技淫巧：动态高度过渡动画，但是有一个局限性，高度差异越大，过渡效果越糟糕，假设元素真实高度只有 100px，如果 max-height为800px，那只有前1/8有动画，就像这样

那么，有没有更好的方式来解决这个问题呢？

当然也是有的，这次就来介绍一个全新的方式来实现动态高度过渡，一起看看吧

一、grid 布局中的 fr 单位

grid布局中有一个全新的fr单位，用于定义网格轨道大小的弹性系数。grid布局比较复杂，三言两语不可能说清楚，有兴趣的可以参考grid相关教程，例如

张鑫旭老师的写给自己看的display: grid布局教程
大漠老师的现代 Web 布局

这里简单介绍一下fr单位的用途，比如有这样一个布局

<div class="grid">
  <span class="item">1fr</span>
  <span class="item">1fr</span>
  <span class="item">1fr</span>
</div>

关键样式如下

.grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

可以得到这样的效果

这里的repeat(3, 1fr)其实就是1fr 1fr 1fr的简写，表示 3 等分剩余空间。还可以设置在垂直方向上

.grid{
  grid-template-rows: repeat(3, 1fr);
}

效果如下

也可以改变各自的分配比例

.grid{
  grid-template-rows: 1fr 2fr 1fr;
}

效果如下

现在来看一种特殊情况，还可以将分配比例设置为0fr

.grid{
  grid-template-rows: 0fr 2fr 1fr;
}

效果如下

是不是有点奇怪，0fr怎么和1fr占比相同呢？

其实这是由grid的最小尺寸规则决定的，此时的最小高度是min-content，也就是由内部文本决定的。如果没有文字，0fr自然就不占空间了，下面是去除文字后的效果

如果想保留文字并且不占空间怎么办呢？可以直接手动设置最小尺寸

span{
  min-height: 0
}

这样0fr也会不占空间

还可以借助超出隐藏，彻底隐藏子内容

.grid{
  overflow: hidden;
}
span{
  min-height: 0
}

效果如下

应该还是比较容易理解吧，那么和动画有啥关系呢？接着往下看

二、grid 中的过渡动画

有同学可能纳闷了，为啥要折腾这个0fr呢？下面就来揭晓

如果重新设置1fr，子内容又会重新出现

.grid{
  grid-template-rows: 1fr 2fr 1fr;
}

下面重点来了，grid中的fr单位也是支持过渡动画的(0fr=>1fr )

.grid{
  grid-template-rows: 1fr 2fr 1fr;
  transition: .3s
}

效果如下

由于高度是由内部文本撑开的，也就是高度不确定，而0fr到1fr的过渡变化，相当于实现了高度不固定的过渡动画

进一步精简一下，可以实现这样的效果

这就是高度不固定动画的雏形了，换个文本多一点也完美支持

完整 demo可以查看以下任意链接

CSS auto height transition (codepen.io)
CSS auto height transition (runjs.work)

三、自适应高度动画的两个实例

现在根据上面的原理来实现两个实例。

首先来看文章最开头的示例，HTML 结构是这样的

<div class="wrap">
  <button class="trigger">鼠标放上来试试</button>
  <div class="grid">
    <div><p>欢迎关注前端侦探，这里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧，比如这篇文章，如何让 auto height 支持过渡动画？一起看看吧</p></div>
  </div>
</div>

简单修饰一下，应该比较容易，可以得到这样的效果

然后通过上面的技巧将下拉内容隐藏起来，关键样式如下

.grid{
  display: grid;
  grid-template-rows: 0fr;
  transition: .3s;
  overflow: hidden;
}
.grid>div{
  min-height: 0;
}

然后通过hover触发显示，也就是改变grid-template-rows

.wrap:hover .grid{
  grid-template-rows: 1fr;
}

这样就实现了不定高度的过渡动画

完整 demo可以查看以下任意链接

CSS auto height drop (codepen.io)
CSS auto height drop (runjs.work)

如果仅仅是悬浮窗口，由于是绝对定位，不会影响其他布局，其实是可以用transform scale 进行缩放的，再来看另外一个更加实用的例子，常见的菜单展开收起效果，就像这样

可以看到，在展开的同时，下方的元素也被挤压下去了，这样效果更加自然，也是transform实现不了的，这里的切换是通过:checked实现的，关键代码如下

<input hidden type="checkbox" id="s1" checked />
<label for="s1">工作台</label>
<div class="sub">
  <ul>
    <li>项目列表</li>
    <li>数据配置器</li>
  </ul>
</div>

ul{
  min-height: 0;
}
.sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s;
  overflow: hidden;
}
:checked ~ .sub {
  grid-template-rows: 1fr;
}

完整 demo可以查看以下任意链接

CSS auto height menu (codepen.io)
CSS auto height menu (runjs.work)

四、注意事项和一些局限性

下面是一些注意事项。

这里的动画源于grid-template-rows的变化，也就是0fr到1fr

**注意，注意，注意，**这里的0fr必须是0fr，不能是0或者0px，必须是fr单位

下面是改为40px的效果（动画丢失）

再者，0fr也不支持calc计算，直接被认为不合法

这意味着，例如你希望默认有一个固定高度（非0），然后展开到自适应高度，这种方法是无法实现过渡动画的，略遗憾

五、最后总结一下

最后再来回顾一下实现关键过程

.grid{
  display: grid;
  grid-template-rows: 0fr;
  transition: .3s;
  overflow: hidden;
}
.grid>div{
  min-height: 0;
}
.wrap:hover .grid{
  grid-template-rows: 1fr;
}

主要是利用了grid弹性布局可以实现过渡动画的特点，下面总结一些实现要点

高度在设置成auto关键词时不会触发transition过渡动画
grid布局中的fr单位，可以用于定义网格轨道大小的弹性系数
grid布局的尺寸计算规则是由最小高度决定的，默认是min-content，也就是由内部文本决定的，可以通过手动设置min-height来实现0fr
grid布局也支持过渡动画(0fr=>1fr )，这样就实现高度不固定的过渡动画
要使过渡动画生效，必须是fr单位，其他单位不行，也不能通过calc计算
这种方法只能实现初始高度为0到自适应高度的过渡变化，略微遗憾

最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发???

作者：XboxYan
链接：https://juejin.cn/post/7196843994030342200

TML（超文本标记语言）中的元素可以分为两类：块级元素和内联元素。块级元素会自动占据一行，并且可以设置宽度和高度。内联元素不会自动占据一行，而是根据文本内容的长度自动调整宽度。块级元素可以包含其他元素，包括文本、图像、链接等。内联元素通常不包含其他元素。

1. 块级元素具有以下特点：

块级元素会自动占据一行，并且可以设置宽度和高度。
块级元素可以包含其他元素，包括文本、图像、链接等。
块级元素可以设置背景颜色、边框、字体等样式属性。

以下是一些常见的块级元素：

<div>：用于定义一个块级容器，可以包含其他元素。
<p>：用于定义段落，通常包含文本内容。
<h1>到<h6>：用于定义标题，从h1到h6分别表示从大到小的标题级别。
<table>：用于定义表格，包含多个行和列。
<form>：用于定义表单，包含输入框、按钮等元素。
<ul>和<ol>：用于定义无序列表和有序列表，包含多个列表项。
<img>：用于定义图像，用于在网页中显示图片。

这些块级元素可以通过设置 CSS 样式属性来实现不同的布局和样式效果，例如设置背景颜色、边框、字体、大小、颜色等。同时，块级元素还可以通过设置 CSS 定位属性来实现定位和浮动效果，例如设置position: relative;、float: left;

2. 内联元素具有以下特点：

内联元素不会自动占据一行，而是根据文本内容的长度自动调整宽度。
内联元素可以设置字体、颜色、大小等样式属性。
内联元素通常不包含其他元素，而是直接嵌入文本内容中。

以下是一些常见的内联元素：

<a>：用于定义超链接，通常用于链接到其他网页或文件。
<em>：用于定义强调文本，通常呈现为斜体效果。
<strong>：用于定义加粗文本，通常呈现为粗体效果。
<span>：用于定义自定义样式的文本，通常用于应用特定的 CSS 样式。
<img>：用于定义图像，通常用于在网页中显示图片。

这些内联元素可以通过设置 CSS 样式属性来实现不同的样式效果，例如设置字体、颜色、大小等。同时，内联元素还可以通过设置 CSS 定位属性来实现定位和浮动效果，例如设置position: relative;、float: left。

<img> 元素在 HTML 中既可以是块元素，也可以是内联元素，这取决于它的 display 属性的值。

默认情况下，<img> 元素是内联元素，它会根据文本的流动方式进行布局。这意味着如果在一行中放置了多个 <img> 元素，它们会在一行中排列，并且不会自动换行。

但是，如果将 <img> 元素的 display 属性设置为 block，那么它就会成为块元素。块元素会占据一行，并且可以设置宽度和高度。在这种情况下，多个 <img> 元素会自动换行，并且可以通过设置 margin 属性来调整它们之间的间距。

html

<img src="image.jpg" alt="图片描述" style="display: block;">

在上面的示例中，<img> 元素的 display 属性被设置为 block，这会使它成为一个块元素。你可以根据需要调整图片的宽度和高度，以及 margin 属性来控制图片之间的间距。

着 Web 技术的发展，有很多需要将 HTML 内容转换为 PDF 文档并下载的场景，比如常见的收据、发票、电子报告、对账清单、文档翻译等等。

本文将研究当前比较流行的基于 Node.js 技术栈的 HTML 转 PDF 库：Puppeteer、jsPDF 和 PDFKit，大纲如下：

Puppeteer 及优缺点
jsPDF 及优缺点
PDFKit 及优缺点
Puppeteer vs jsPDF vs PDFKit 功能对比

1.Puppeteer

1.1.使用 Puppeteer 生成 PDF

Puppeteer 是谷歌开发的一个 Node.js 库，为控制无头（或完整）Chrome 或 Chromium 浏览器提供了一个高级 API。它是最流行的开源 HTML 到 PDF 转换器，支持 HTML、CSS 和 JavaScript。

Puppeteer 允许您自动化Web浏览器中的各种任务，例如 Web 抓取、网站测试、截图创建和 PDF 生成。它利用 Chrome 或 Chromium Web 浏览器的功能将 HTML 内容呈现为 PDF 文件。

下面使用 Puppeteer 快速初始化一个项目：

nvm use 20.6.1

mkdir puppeteer-demo

cd puppeteer-demo

npm init -y

npm install puppeteer

touch index.js

在 index.js 中添加如下代码：

import puppeteer from 'puppeteer';

(async ()=> {
  const browser=await puppeteer.launch({
    headless: 'new',
  });

  const page=await browser.newPage();

  await page.setContent(
    `<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <style>
        body {
          display: grid;
          place-items: center;
          margin: 0;
          background-color: #ccc;
          min-height: 100vh;
        }
      </style>
      <h1>Hello, Puppeteer!</h1>
    </body>
    </html>`
  );

  await page.pdf({ path: 'result.pdf', format: 'A4' });

  await browser.close();
})();

在上面的代码中，我们导入 Puppeteer 库，启动无头 Chromium 浏览器，并在浏览器中创建一个新页面。我们还会根据页面内容和指定选项（如路径和格式）生成 PDF，生成完成后关闭浏览器并释放资源。

1.2.优点

您可以完全控制要在 PDF 中包含网页的哪些部分。您可以指定具体的元素、部分或整个页面
Puppeteer 提供了自定义选项，如指定页面大小、边距、页眉和页脚，使您可以根据特定需求定制 PDF 布局
Puppeteer 可以捕捉 PDF 中的交互元素，如超链接和表单字段，适用于生成交互式 PDF 文件。

1.3.缺点

使用 Puppeteer 生成的 PDF 有时可能比使用类似库生成的PDF要大。这会影响下载时间和存储成本。
使用 Puppeteer 渲染复杂或大型网页可能会消耗资源，导致PDF生成变慢和内存使用增加。

2.PDFKit

PDFKit 是 JavaScript 生态系统中最古老和最成熟的 PDF库之一。目前仍得到良好维护并定期更新。该库通常使用 Node.js 在服务器端环境中创建和操作 PDF 文档。它允许您通过定义每个页面的内容、布局和格式来以程序方式生成PDF文件。

PDFKit 提供了用于 PDF 文档生成的高级 API，并支持各种功能，使其成为创建自定义 PDF 的多功能工具。作为 PDFKit 的包装器，已开发出多个 PDF 库，支持自定义字体和图像嵌入。

2.1.使用 PDFKit 生成 PDF

让我们来快速初始化一个 PDFKit 项目：

nvm use 20.6.1

mkdir pdfkit-demo

cd pdfkit-demo

npm init -y

npm install pdfkit

touch index.js

在 index.js 中添加如下代码：

import fs from 'node:fs';
import PDFDocument from 'pdfkit';

const doc=new PDFDocument();

const stream=fs.createWriteStream('example.pdf');

doc.pipe(stream);
doc.fontSize(12).text('Hello, PDFKit!', { align: 'center' });
doc.end();

stream.on('finish', ()=> {
  console.log('success');
});

执行 node index.js 后，可以看到 PDF 可以生成生成，并触发 finish 事件的回调函数执行，打印出了 success 。

2.2.优点

由于它是开源的，并由社区积极维护，PDFkit 可以不断改进和更新
PDFKit 可对 PDF 文档的内容、布局和格式进行精细控制。您可以根据自己的特定需求创建高度定制的 PDF 文档
PDFKit 是根据用户请求、数据或其他服务器端进程动态生成 PDF 的绝佳选择

2.3.缺点

创建具有高级布局和功能的复杂 PDF 可能具有挑战性，可能需要充分了解库的 API
对于新手来说，PDFKit 的学习曲线可能比更直接的 HTML 到 PDF 转换工具更陡峭，因为它需要对文档结构进行更多的手动控制

3.jsPDF

jsPDF 是一个流行的 JavaScript PDF 生成器，允许用户动态在 Web 浏览器中生成 PDF 文件。这个库维护良好，稳定易用，并且有丰富的文档。

jsPDF 在客户端操作，非常适合在 Web 应用程序中生成 PDF ，无需在服务器端生成。它可以修改现有布局，并允许用户通过自定义来控制他们的 PDF。还可以用来编辑现有的 PDF 文档或从头创建一个，包括图像、表格和形状等内容。

3.1.使用 jsPDF 生成 PDF

示例中使用官方提供的 CDN 地址 https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  </head>
  <body>
    <style>
      body {
        display: grid;
        place-items: center;
        margin: 0;
        background-color: #ccc;
        min-height: 100vh;
      }
    </style>
    <h1>Hello, jsPDF!</h1>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const pdf=new window.jsPDF();
        const element=document.body;

        pdf.html(element, {
          callback: function (pdf) {
            // Save the PDF to a file or display it
            pdf.save("output.pdf");
          },
        });
      });
    </script>
  </body>
</html>

文档地址：http://raw.githack.com/MrRio/jsPDF/master/docs/index.html

3.2.优点

jsPDF 完全在客户端（页面）上运行，这使它成为在 Web 应用程序中生成 PDF 的一个很好的选择，而无需外部服务
jsPDF 相对易于使用，尤其是对于基本的 PDF 生成任务。您只需几行 JavaScript 代码即可创建 PDF 文档
由于 jsPDF 是一个 JavaScript 库，它可以与 Web 应用程序无缝集成，并可以与其他 JavaScript 库和框架一起使用

3.3.缺点

在客户端生成 PDF 可能会耗费大量资源，尤其是大型或复杂文档。这会影响浏览器性能或导致内存消耗问题
jsPDF 在现代 Web 浏览器中得到广泛支持，但在旧的浏览器或具有较少 JavaScript 支持的环境中可能无法按预期工作
与 PDFKit 等服务器端 PDF 生成库不同，jsPDF 具有有限的高级功能和能力。它可能不适用于复杂的PDF要求。

4.Puppeteer、jsPDF 和 PDFKit 功能比较

为便于大家参考，下面总结了 Puppeteer、jsPDF 和 PDFKit 库在 PDF 生成、文件大小、浏览器集成和社区支持方面的比较：

5.结论

当为 HTML 转 PDF 需求选择实现方案时，可以参考以上实现方案。如果你想从头开始生成 PDF，PDFKit 可能是你最好的选择。要通过 HTML 或者 SVG 内容快速转换为 PDF，jsPDF 可能更合适。对应网页渲染和交互式内容，强烈建议你选择 Puppeteer。

最后，方案选择在很大程度上还取决于你的项目类型、规范及开发者个人喜好。

如果文章对你有帮助，欢迎关注和转发，感谢你的支持！

在线咨询

上一篇：css代替js的案例汇总
下一篇：242.C# HTMLAgilityPack 解析H

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS 如何让auto height完美支持过渡动画

一、grid 布局中的 fr 单位

二、grid 中的过渡动画

三、自适应高度动画的两个实例

四、注意事项和一些局限性

五、最后总结一下

1. 块级元素具有以下特点：

2. 内联元素具有以下特点：

<img> 元素在 HTML 中既可以是块元素，也可以是内联元素，这取决于它的 display 属性的值。

1.Puppeteer

1.1.使用 Puppeteer 生成 PDF

1.2.优点

1.3.缺点

2.PDFKit

2.1.使用 PDFKit 生成 PDF

2.2.优点

2.3.缺点

3.jsPDF

3.1.使用 jsPDF 生成 PDF

3.2.优点

3.3.缺点

4.Puppeteer、jsPDF 和 PDFKit 功能比较

5.结论

您的项目需求