【CSS in Depth 2 精译_091】15.4：让 CSS 高度值过渡到自动高度 + 15.5：自定义属性的过渡设置（全新）+ 15.6：本章小结

当前内容所在位置（可进入专栏查看其他译好的章节内容）

• 第五部分 添加动效 ✔️
• 【第 15 章 过渡】 ✔️
  • 15.1 状态间的由此及彼
  • 15.2 定时函数
    • 15.2.1 定制贝塞尔曲线
    • 15.2.2 阶跃
  • 15.3 非动画属性
    • 15.3.1 不可添加动画效果的属性
    • 15.3.2 淡入与淡出
  • 15.4 过渡到自然高度 ✔️
  • 15.5 自定义属性的过渡设置 ✔️
  • 15.6 本章小结 ✔️

《CSS in Depth》新版封面

译者按
本篇为新版第 15 章的剩余两节内容，也是本章的收官篇。主要介绍了 CSS 过渡特效在高度值方面的实际应用，以及如何在自定义属性本身设置过渡特效。尤其是最后新加的 @property 规则的用法介绍和语法归纳总结，让我彻底明白了 MDN 文档中那些抽象的语法规则的准确含义。字里行间不难体会到作者对 CSS 新增特性的憧憬与热爱；也唯有热爱，可抵岁月漫长。

15.4 过渡到自动高度 Transitioning to auto height

本节将尝试为下拉菜单添加另一种常见的页面效果，即通过高度的过渡来滑动打开和关闭下拉菜单。最终效果如图 15.11 所示。

【图 15.11 通过过渡高度来滑动打开下拉菜单的效果图】

我们希望当下拉菜单打开时，高度将从 0 过渡到正常高度（即 auto）；而菜单关闭时又会过渡回 0。代码清单 15.10 展示了该特效的基本思路，只可惜该样式并不管用。请先根据示例代码同步更新本地样式表，然后再来看看问题出在哪、又该如何处理。

代码清单 15.10 对高度设置过渡的示例样式代码

.dropdown__drawer {position: absolute;background-color: var(--background-color);width: 10em;height: 0; /* 关闭状态下高度为 0 */overflow: hidden; /* 关闭状态下 overflow 设为 hidden */transition: height 0.2s ease-out; /* 对高度设置过渡特效 */
}
.dropdown.is-open .dropdown__drawer {height: auto; /* 打开状态下的高度由内容决定 */
}

设置 overflow 为 hidden，是为了在关闭或者过渡过程中截断下拉菜单的内容。而这并未生效的原因就在于，一个属性值是无法从长度值 0 过渡到 auto 的。此时下拉菜单仍将正常打开和关闭，只是没有动画效果。

您也可以手动设置一个高度值，比如 120px，但问题是没办法预判高度的具体大小。因为只有当内容在浏览器中渲染完成之后高度才会确定下来，因此只能通过 JavaScript 来获取这个值。

页面加载完毕后，我们访问 DOM 元素的 scrollHeight 属性，就可以拿到这个高度值。然后，就可以把下拉菜单打开时的元素高度修改为新获取到的值。试根据代码清单 15.11 同步修改本地示例页面。

代码清单 15.11 精确设置元素高度，让页面过渡设置生效

<script type="module">var toggle = document.getElementsByClassName("dropdown__toggle")[0];var dropdown = toggle.parentElement;var drawer = document.getElementsByClassName("dropdown__drawer")[0];var height = drawer.scrollHeight; // 获取抽屉元素自动高度对应的计算属性值toggle.addEventListener("click", function () {dropdown.classList.toggle("is-open");if (dropdown.classList.contains("is-open")) {drawer.style.setProperty("height", height + "px"); // 手动设置高度来打开菜单} else {drawer.style.setProperty("height", "0"); // 将高度值重置为 0 来关闭菜单}});
</script>

现在，除了触发 is-open 样式类外，我们还为元素的高度设置了精确的像素值，这样就可以过渡到正确的高度位置。然后在关闭菜单时再把高度重置为 0，就又能过渡回初始状态。

警告

如果某个元素使用 display: none 隐藏起来，那它的 scrollHeight 属性值将为 0。此时，可以先将 display 属性设为 block（即 el.style.display = 'block'），接着获取其 scrollHeight 大小，然后再重置 display 的值（即 el.style.display = 'none'）。

有时候过渡特效需要 CSS 与 JavaScript 相互配合。在某些情况下，可能更容易想到的方案是整个逻辑全部通过 JavaScript 来实现。例如，可以只利用 JavaScript 重复设置新的高度值就能实现高度的过渡效果。但通常情况下，我们应该尽可能多地让 CSS “勇挑重担”，去实现那些更耗费性能的页面效果。浏览器对这部分已经做过优化了（因此在性能上的表现会更加优越），并且提供了类似过渡曲线的特性，避免了手动实现需要书写的大量代码。

---

15.5 自定义属性的过渡设置 Transitioning custom properties

在前面的示例中，我们见过自定义属性值在 CSS 过渡特效中的应用了。例如在代码清单 15.7 中（译注：详见 15.3 节内容），我们就实现了从 background-color: var(--background-color) 到 background-color: var(--highlight-color) 的过渡，该样式对下拉菜单中的切换按钮生效。然而，在某些情况下，我们可能想对自定义属性本身设置过渡，而不是针对它们所修饰的样式属性；例如，希望直接将 --background-color 从红色过渡到蓝色。这类过渡效果默认情况下是不会生效的。

为此，需要给浏览器提供更多信息，具体来说，我们需要声明该属性的 数据类型（data type）。这样浏览器才知道如何在两种颜色、两种长度值、或者其他特定类型之间执行正确的插值计算。在 CSS 中，数据类型的声明是通过 @property 规则实现的。

警告

截至 2024 年年中，Firefox 浏览器尚未提供对 @property 规则的特性支持，但预计很快就支持了。在启用该功能并将其作为页面开发的核心功能前，还请查阅 Can I User 官网获取最新的浏览器兼容情况。

译注

截至 2024 年 12 月 23 日，@property 已经得到了主流浏览器的全面支持，作者提到的 Firefox 浏览器也从今年 7 月发布的 v128 版本开始全面支持了该规则，目前全网覆盖率已达 93.15%：

【补图：各浏览器目前对 @property 规则的最新支持情况（截至 2024 年 12 月 23 日）】

一个 @property 规则必须对自定义属性的以下三个方面进行描述，即：它的数据类型（或语法规则）、该属性是否应当默认从父元素继承，以及该属性的初始值。以下代码为一个典型的 @property 规则定义：

@property --hue {syntax: "<angle>";inherits: false;initial-value: 0deg;
}

上述代码定义了一个自定义属性 --hue。该属性必须为一个角度值（如 15deg）；它不会像正常属性那样继承属性值，并且初始值为 0deg。有了这样的定义，浏览器就会将其他类型的属性值解析为无效属性值。例如将某个百分比赋给该属性，写作：--hue: 15%；则浏览器将忽略该声明并将其属性值重置为初始值 0deg。如果不声明具体的值，则默认值也是初始值。

代码清单 15.12 为一个定义好的自定义属性的示例应用。该代码利用自定义属性，实现了按钮悬停时切换背景颜色的过渡特效。通过改变 OKLCH 颜色值中的色相角，按钮会在鼠标悬停时由紫色过渡为蓝色。如果没有 @property 规则，过渡效果将无法生效。

代码清单 15.12 对自定义属性设置过渡的示例样式代码

@property --hue { /* 完成属性 --hue 的定义 */syntax: "<angle>";inherits: false;initial-value: 0deg;
}button {padding: 0.5em 1em;border: none;color: white;--hue: 314deg;background-color: oklch(39% 0.1 var(--hue)); /* 应用该属性 */transition: --hue 0.5s linear; /* 对该属性本身设置过渡特效 */
}button:hover {--hue: 250deg;
}

上述代码声明了一个 syntax 值为 <angle> 的数据类型。该 syntax 语法值支持的合法声明如下 ——

• <length>；
• <number>；
• <percentage>；
• <length-percentage>：适用于属性值或为长度值或为百分比值的情况；
• <color>；
• <image>；
• <url>：即使用 url() 函数定义的属性值；
• <integer>；
• <angle>；
• <time>；
• <resolution>：例如 300dpi；
• <transform-function>：例如 scale() 或 rotate()；详见第 16 章；
• <custom-ident>：即用户定义的字符串。

此外还可以使用关键字，例如 auto。需要注意的是，给定的语法值必须用双引号括起来。

为自定义属性提供规则定义不仅有利于过渡和动画效果的设置，同时还是实现 类型安全（type safety） 的有效手段。这样一来，即便不慎将一个不符合语法定义的无效属性值赋给了该自定义属性，浏览器也可以轻松忽略掉这个值。

您还可以定义出更复杂的语法形式，只是在某些情况下，这么做可能会让浏览器无法基于该属性、对过渡或者动画特效执行更为复杂的插值计算。

使用 | 标记作为语义 “或” 来使用，则可以表示该属性值的数据类型可以是给定的两个或多个类型中的一个。例如 syntax: "true | false" 就定义了一个布尔属性；再比如声明 syntax: "<color> | <hue> | auto"，则属性值可以为某颜色值、某色调或者关键字 auto。

使用 + 标记则表示用空格分隔的属性值列表。例如：syntax: "<integer>+" 表示接受一个或多个整数型的属性值；同理，# 标记则用于定义一个以逗号分隔的属性值列表。

最后，还可以使用星号 * 来定义一个通用语法值。因此 syntax: "*" 将允许将该属性设置为任意类型的值。这样一来，初始值的定义就不作硬性要求了（not required）。

对于 CSS 过渡来说，只学习这些知识还不够。我们将在下一章把过渡与变换（transforms）结合起来协同开发。

---

15.6 本章小结 Summary

• 过渡可以让元素的一个或多个属性随着属性值的动态变化而平滑地在属性值之间做插值变换或移动。
• 在属性值的过渡特效设置中，三次贝塞尔曲线定义了过渡过程中的定时函数。该曲线可以是线性的、也可以是加速或减速的。
• 加速过渡特效最能吸引用户的注意力。
• 减速过渡特效最适合向用户表明他们执行的相关操作已然生效。
• 某些属性具有离散型属性值，无法在过渡特效中实现平滑变换。
• 当完全依靠 CSS 无法满足需求时，可以引入必要的 JavaScript 脚本来修改类名，从而配合 CSS 过渡来实现期望的页面特效。
• @property 规则定义了自定义属性的具体特性，让属性的过渡设置成为可能，同时也保障了样式代码的类型安全。

---

---

关于《CSS in Depth》（中译本书名《深入解析 CSS》）

	第 1 版	第 2 版
读者评分	原版：4.7（亚马逊）；中文版：9.3（豆瓣）	原版：5.0（亚马逊）；中文版：暂无，待出版
出版时间	原版：2018 年 3 月；中文版：2020 年 4 月	原版：2024 年 7 月；中文版：暂无，待出版
原价	原版：$44.99；中文版：￥139.00	原版：$59.99；中文版：暂无，待出版
现价	原版：$36.49；中文版：￥52.54 起步	原版：$52.09；中文版：暂无，待出版
原版国内预订	起步价 ￥461.00	起步价 ￥750.00

本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！

目前已完结的章节（可进入本专栏查看详情，连载期间完全免费）：

• 第一章 层叠、优先级与继承（已完结）
  • 1.1 层叠
  • 1.2 继承
  • 1.3 特殊值
  • 1.4 简写属性
  • 1.5 CSS 渐进式增强技术
  • 1.6 本章小结
• 第二章 相对单位（已完结）
  • 2.1 相对单位的威力
  • 2.2 em 与 rem
  • 2.3 告别像素思维
  • 2.4 视口的相对单位
  • 2.5 无单位的数值与行高
  • 2.6 自定义属性
  • 2.7 本章小结
• 第三章 文档流与盒模型（已完结）
  • 3.1 常规文档流
  • 3.2 盒模型
  • 3.3 元素的高度
  • 3.4 负的外边距
  • 3.5 外边距折叠
  • 3.6 容器内的元素间距问题
  • 3.7 本章小结
• 第四章 Flexbox 布局（已完结）
  • 4.1 Flexbox 布局原理
  • 4.2 弹性子元素的大小
  • 4.3 弹性布局的方向
  • 4.4 对齐、间距等细节处
  • 4.5 本章小结
• 第五章 网格布局（已完结）
  • 5.1 构建基础网格
  • 5.2 网格结构剖析 （上）
    • 5.2.1 网格线的编号（下）
    • 5.2.2 网格与 Flexbox 配合（下）
  • 5.3 两种替代语法
    • 5.3.1 命名网格线
    • 5.3.2 命名网格区域
  • 5.4 显式网格与隐式网格（上）
    • 5.4.1 添加变化 （中）
    • 5.4.2 让网格元素填满网格轨道（下）
  • 5.5 子网格（全新增补内容）
  • 5.6 对齐相关的属性
  • 5.7 本章小结
• 第六章 定位与堆叠上下文（已完结）
  • 6.1 固定定位
    • 6.1.1 创建一个固定定位的模态对话框
    • 6.1.2 在模态对话框打开时防止屏幕滚动
    • 6.1.3 控制定位元素的大小
  • 6.2 绝对定位
    • 6.2.1 关闭按钮的绝对定位
    • 6.2.2 伪元素的定位问题
  • 6.3 相对定位
    • 6.3.1 创建下拉菜单（上）
    • 6.3.2 创建 CSS 三角形（下）
  • 6.4 堆叠上下文与 z-index
    • 6.4.1 理解渲染过程与堆叠顺序（上）
    • 6.4.2 用 z-index 控制堆叠顺序（上）
    • 6.4.3 深入理解堆叠上下文（下）
  • 6.5 粘性定位
  • 6.6 本章小结
• 第七章 响应式设计（已完结）
  • 7.1 移动端优先设计原则（上篇）
    • 7.1.1 创建移动端菜单（下篇）
    • 7.1.2 给视口添加 meta 标签（下篇）
  • 7.2 媒体查询（上篇）
    • 7.2.1 深入理解媒体查询的类型（上篇）
    • 7.2.2 页面断点的添加（中篇）
    • 7.2.3 响应式列的添加（下篇）
  • 7.3 流式布局
  • 7.4 响应式图片
  • 7.5 本章小结
• 第八章 层叠图层及其嵌套
  • 8.1 用 layer 图层来操控层叠规则（上篇）
    • 8.1.1 图层的定义（上篇）
    • 8.1.2 图层的顺序与优先级（下篇）
    • 8.1.3 revert-layer 关键字（下篇）
  • 8.2 层叠图层的推荐组织方案
  • 8.3 伪类 :is() 和 :where() 的用法
  • 8.4 CSS 嵌套的使用
    • 8.4.1 嵌套选择器的使用
    • 8.4.2 深入理解嵌套选择器
    • 8.4.3 媒体查询及其他 @规则 的嵌套
  • 8.5 本章小结
• 第九章 CSS 的模块化与作用域
  • 9.1 模块的定义
    • 9.1.1 模块和全局样式
    • 9.1.2 一个简单的 CSS 模块
    • 9.1.3 模块的变体
    • 9.1.4 多元素模块
  • 9.2 将模块组合为更大的结构
    • 9.2.1 模块中多个职责的拆分
    • 9.2.2 模块的命名
  • 9.3 CSS 的作用域
    • 9.3.1 CSS 作用域的就近原则
    • 9.3.2 划定作用域的边界
    • 9.3.3 CSS 中的隐式作用域
    • 9.3.4 关于 CSS 作用域与层叠图层
  • 9.4 CSS 模式库
  • 9.5 本章小结
• 第十章 CSS 容器查询
  • 10.1 容器查询的一个简单示例
    • 10.1.1 容器尺寸查询的用法
  • 10.2 深入理解容器
    • 10.2.1 容器的类型
    • 10.2.2 容器的名称
    • 10.2.3 容器与模块化 CSS
  • 10.3 与容器相关的单位
  • 10.4 容器样式查询的用法
    • 10.4.1 将模块与所在容器解耦
    • 10.4.2 减少重复代码
  • 10.5 本章小结
• 第 11 章 颜色与对比
  • 11.1 通过对比进行交流
    • 11.1.1 模式的建立
    • 11.1.2 还原设计稿
  • 11.2 颜色的定义
    • 11.2.1 色域与色彩空间
    • 11.2.2 CSS 颜色表示法（RGB、Hex、HSL、HWB、LAB/OKLAB、LCH/OKLCH）
  • 11.3 利用 OKLCH 处理颜色（上篇）
    • 11.3.4 从页面其他颜色衍生出新颜色（下篇）
  • 11.4 思考字体颜色的对比效果
  • 11.5 本章小结
• 第 12 章 CSS 排版与间距
  • 12.1 间距设置
    • 12.1.1 使用 em 还是 px
    • 12.1.2 对行高的深入思考
    • 12.1.3 行内元素的间距设置
  • 12.2 Web 字体
  • 12.3 谷歌字体
  • 12.4 @font-face 的工作原理
    • 12.4.1 字体格式与回退处理
    • 12.4.2 同一字型的多种变体形式
  • 12.5 性能因素考量
    • 12.5.1 font-display 属性解析
    • 12.5.2 可变字体的用法
  • 12.6 调整字间距，提升可读性
    • 12.6.1 正文的字间距
    • 12.6.2 标题、小元素和间距
  • 12.7 本章小结
• 第 13 章 渐变、阴影与混合模式
  • 13.1 渐变
    • 13.1.1 使用多个颜色节点（上）
    • 13.1.2 颜色插值方法（中）
    • 13.1.3 径向渐变（下）
    • 13.1.4 锥形渐变（下）
  • 13.2 阴影
    • 13.2.1 利用渐变和阴影打造立体感
    • 13.2.2 使用扁平化设计创建元素
    • 13.2.3 创建混合风格的按钮外观
  • 13.3 混合模式
    • 13.3.1 为图片上色
    • 13.3.2 混合模式的类型
    • 13.3.3 图片纹理的添加
    • 13.3.4 融合混合模式的用法
  • 13.4 本章小结
• 第 14 章 蒙版、形状与剪切
  • 14.1 滤镜
    • 14.1.1 滤镜的类型
    • 14.1.2 背景滤镜
  • 14.2 蒙版
    • 14.2.1 带渐变效果的蒙版特效
    • 14.2.2 基于亮度来定义蒙版
    • 14.2.3 其他蒙版属性
  • 14.3 剪切路径
    • 14.3.1 多边形的裁剪路径
    • 14.3.2 Firefox 内置的剪切路径工具
    • 14.3.3 其他剪切路径类型
  • 14.4 浮动与形状
    • 14.4.1 浮动
    • 14.4.2 形状的定义
  • 14.5 本章小结
• 附录
  • 附录A：CSS 选择器参考
  • 附录B：CSS 预处理器简介