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

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

《CSS in Depth》新版封面

译者按
没想到看似简单的 CSS 过渡特效，个中细节还暗藏玄机。将其与前面演示的下拉菜单相结合，就会出现各种各样的问题。之前遇到类似情况都是依赖 JavaScript 来解决；现在可以 CSS 也能搞定，而且性能比 JS 版还好，何乐而不为呢？

15.3 非动画属性 Non-animatable properties

大部分过渡设置都很容易理解。比如，对链接元素设置 transition: color 200ms linear 后，当鼠标悬停或点击这些链接，它们就会由一种颜色过渡到另一种颜色。您也可以对某个可点击板块（clickable tile）的背景色，或者某按钮的内边距添加过渡特效。

但要是 JavaScript 修改了页面上的某些内容，可能就得考虑考虑添加过渡是否合适了。有些情况比较简单，就和为元素添加过渡属性差不多；但如果遇到的是一些复杂情况，可能就需要考虑一些额外配置了。本章后续内容将构建一个带过渡特效的下拉菜单，让它在展开时较为柔和，而不是冷不丁地突然冒出来。

我们希望先给菜单设置淡入（fade in）特效，即对 opacity 属性添加过渡；接着再修改下拉菜单，并对 height 属性添加另一个过渡效果。这两步操作都存在一些问题，需要我们再思考一下。

下拉菜单的页面效果如图 15.8 所示。我们先来实现菜单的展开和关闭，然后再添加过渡效果。菜单下方专门放了一个链接，需要在菜单的下拉抽屉展开时渲染到链接元素的上方，这一点非常重要。

【图 15.8 下拉菜单关闭（左侧）与打开（右侧）时的页面效果图】

为下拉菜单新建一个页面，添加代码清单 15.6 中的示例代码。这与前面章节构建的下拉菜单差不多，也包含了一些 JavaScript 脚本来触发菜单的开启与关闭。

代码清单 15.6 带过渡特效的下拉菜单 HTML 标记

<div class="dropdown" aria-haspopup="true"><button class="dropdown__toggle" type="button">Menu</button><div class="dropdown__drawer"><!-- 抽屉元素会显示与隐藏，对应下拉菜单的功能 --><ul class="menu" role="menu"><li role="menuitem"><a href="/features">Features</a></li><li role="menuitem"><a href="/pricing">Pricing</a></li><li role="menuitem"><a href="/support">Support</a></li><li role="menuitem"><a href="/about">About</a></li></ul></div>
</div>
<p><a href="/read-more">Read more</a></p><!-- 一个位于下拉菜单下方的链接元素 --><script type="module">var toggle = document.getElementsByClassName('dropdown__toggle')[0];var dropdown = toggle.parentElement;// 点击按钮时在容器上切换样式类 is-open 的添加与删除toggle.addEventListener('click', function () {dropdown.classList.toggle('is-open');});
</script>

添加淡入特效前的样式代码如代码清单 15.7 所示。将它们更新到本地样式表，并将样式表关联到示例页面。样式中以及包含了一些过渡效果，在鼠标悬停时颜色可以平滑过渡。此外没有太多新内容，页面已经基本搭好了，接下来就可以专注于淡入特效的实现了。

代码清单 15.7 带过渡效果的下拉菜单样式代码

css">@layer global, modules;@layer global {body {font-family: Helvetica, Arial, sans-serif;}
}@layer modules {.dropdown {--border-color: oklch(61% 0.08 314deg);--text-color: oklch(39% 0.06 314deg);--text-color-focused: oklch(39% 0.2 314deg);--background-color: white;--highlight-color: oklch(95% 0.01 314deg);}.dropdown__toggle {display: block;padding: 0.5em 1em;border: 1px solid var(--border-color);color: var(--text-color);background-color: var(--background-color);font: inherit;text-decoration: none;transition: background-color 0.2s linear; /* 给背景色添加过渡效果 */}.dropdown__toggle:hover {background-color: var(--highlight-color); /* 鼠标悬停时改变背景色 */}.dropdown__drawer {position: absolute;display: none;background-color: var(--background-color);width: 10em;}.dropdown.is-open .dropdown__drawer {display: block;}.menu {padding-left: 0;margin: 0;list-style: none;}.menu > li + li > a {border-top: 0;}.menu > li > a {display: block;padding: 0.5em 1em;color: var(--text-color);background-color: var(--background-color);text-decoration: none;transition: all 0.2s linear; /* 给背景色和文字颜色设置过渡特效 */border: 1px solid var(--border-color);}.menu > li > a:hover { /* 鼠标悬停时改变颜色 */background-color: var(--highlight-color);color: var(--text-color-focused);}
}

在浏览器中打开页面并查看实际效果，点击 “Menu” 按钮应该就能打开或关闭下拉菜单。注意观察按钮和菜单链接在鼠标悬停时是如何平滑过渡颜色样式的，鼠标移开后又是如何变化的。

这里对悬停效果使用了 0.2s 的过渡持续时间。根据经验，绝大部分的过渡持续时间应该介于 200ms 到 500ms 之间。如果持续时间过长，用户就会感觉页面反应迟钝，页面响应让他们产生了无谓的等待。尤其是面对那些经常出现或反复使用的过渡特效时，情况更是如此。

提示

对于鼠标悬停、淡入淡出以及轻微缩放特效，应该使用较快的过渡速度。一般要控制在 300ms 以内，有时甚至还会低至 100ms；而对于那些特效中包含大幅移动或者过程复杂的定时函数的情况，例如回弹特效（bounces，详见第 16 章），持续时间则可以适当拉长，控制在 300ms 到 500ms 之间即可。

我在处理过渡特效时，有时会放慢到两三秒。这样就能仔细观察整个过渡过程，确保浏览器是按我想要的效果在运行。如果您也考虑这样做，记得在完成调试后改回合适的速度。

15.3.1 不可添加动画效果的属性 Properties that cannot be animated

并非所有属性都可以添加动画效果，例如 display 属性就是其中之一。您可以在 display: none 和 display: block 之间切换，但无法在这两个属性值之间设置过渡。因此任何作用于 display 属性上的过渡特效都会被忽略。

如果您在 MDN（https://developer.mozilla.org/）之类的参考指南上查阅属性，它们就会明确告诉您某个属性是否可以添加动画效果、以及哪些类型的值（如长度、颜色、百分比）支持插值运算。MDN 文档中关于 background-color 属性的详细说明（详见：https://mng.bz/1Gdj）如图 15.9 所示。

【图 15.9 MDN 文档为每个属性都提供了一份技术能力摘要信息表】

如图所示，background-color 属性只有一个颜色值时才能添加动画，即从一种颜色变到另一种颜色（这也不难理解，因为属性必须设置为单一的颜色值）。该属性的动画类型（Animation Type）不仅对过渡设置有效，也对第 17 章即将介绍的动画设置有效。此外，文档中还列出了该属性的其他实用信息，比如它的初始值、可以作用于哪些元素、以及该样式属性能否继承等等。如果您需要一份有关某个属性用法的完整技术摘要，可以在 MDN 文档中找到该属性并查看其 形式定义信息表（Formal Definition table）。

说明

大部分接受长度值、数值、颜色值、或者 calc() 函数值的样式属性都支持动画效果的设置；而大部分使用关键字或其他离散值的属性（如 url()）则不支持动画设置。

如果您查阅过 display 属性，就会发现它的动画类型为 discrete。这就意味着它只能被赋予非连续的属性值，无法在动画或过渡特效中做插值计算。如果要实现元素的淡入淡出效果，就不能对 display 属性添加过渡特效了，但可以使用 opacity 属性。

注意

display 属性规范最近有调整，因此目前可以像 visibility 那样支持过渡设置。为此，需要添加声明 transition-behavior: allow-discrete。目前该属性尚未获得浏览器的全面支持，但您可以参考谷歌开发者博客专栏上的这篇博文了解更多详情：Four new CSS features for smooth entry and exit animations。

【译注】

根据 Can I Use 提供的最新统计数据（截至 2024 年 12 月 23 日），各浏览器对 transition-behavior: allow-discrete 的支持率仅为 78.51%，且 Firefox 浏览器尚未提供相关支持：

【补图1：transition-behavior: allow-discrete 最新的浏览器支持情况（截至 2024 年 12 月 23 日）】

根据作者提示，我在本地也测了一下 display 的过渡特效，示例代码如下：

<body><style>css">#box {display: block;width: 100px;height: 100px;background: red;transition: display 1s linear allow-discrete;}</style><div id="box"></div><button id="btn">Toggle display</button><p id="info">Press to Start</p><script>const box = document.querySelector('#box');const btn = document.querySelector('#btn');const info = document.querySelector('#info');btn.addEventListener('click', e => {const invisible = box.style.display === 'none';box.style.display = invisible ? 'block' : 'none';info.innerText = `display: ${box.style.display}`;});</script>
</body>

加载页面后，点击按钮并不会让红色方块立即消失，而是在过渡结束时（即 1 秒时）突然消失（而当再次点击按钮，红色方块会立即渲染）：

【补图2：属性值 allow-discrete 的实测效果对比图】

最后再补充说明一下 MDN 上关于 display 属性的最新形式定义表声明：

【补图3：MDN 在线文档关于 display 属性的形式定义信息表】

请注意最后一行，display 的动画类型为 Discrete，但后面还有一句补充说明：离散行为，但如果动画过渡以 none 开始或至 none 结束，则其在整个持续时间内都是可见的。由于动画特效将在第 17 章介绍，这里暂不展开谈论了。相关演示案例到第 17 章时我再补充说明。

15.3.2 淡入与淡出 Fading in and out

下面，我们将利用元素不透明度的过渡设置，为下拉菜单的打开和关闭分别添加淡入与淡出特效。最终效果如图 15.10 所示。

【图 15.10 实现后的菜单淡入特效示意图】

opacity 的属性值可以是介于 0（完全透明）到 1（完全不透明）之间的任意值。代码清单 15.8 展示了上述效果的基本思路。但仅有这些样式还不够，很快您就会明白原因。先对照示例代码同步更新本地样式表。

代码清单 15.8 设置不透明度与过渡特效的示例样式代码

css">.dropdown__drawer {position: absolute;background-color: var(--background-color);width: 10em;opacity: 0; /* 用于替换 display: none */transition: opacity 0.2s linear; /* 给不透明度设置过渡特效 */
}
.dropdown.is-open .dropdown__drawer {opacity: 1; /* 用于替换 display: block */
}

此时，虽然打开和关闭菜单的淡入淡出效果已经实现了，但问题是下拉菜单关闭后并没有消失 —— 只是完全透明了，而且仍在页面上！如果这时点击 “Read more” 字样的链接，该链接并不会正常工作；我们点击的其实是链接前面的透明菜单项，直接跳到了 “Features” 页面。

我们确实需要利用不透明度来设置过渡，但同时也希望在下拉菜单变为不可见时彻底移除该元素。而这可以借助另一个属性 visibility 来实现。

visibility 属性可以从页面上移除某个元素，用法与 display 属性类似，也可以赋值为 visible 或 hidden；但与 display 的区别在于，visibility 支持动画设置（animatable）。虽然对 visibility 设置过渡不会令其逐渐消失，但 transition-delay 仍然有效；而 display 属性则不会生效。

说明

为某个元素设置 visibility: hidden 可以从可见页面中移除该元素，但不会从文档流中移除它，这就意味着该元素仍然占据着页面空间。其他元素会继续围绕该元素的位置布局，在页面上留下一个空白区域。在本例中暂不影响下拉菜单，因为之前对该元素设置了绝对定位。

我们可以活用 visibility 的这一特性来实现想要的动画效果。试根据代码清单 15.9 同步更新本地样式表，然后再来了解它的工作原理。

代码清单 15.9 巧用过渡延迟对 visibility 设置特效的示例样式代码

css">.dropdown__drawer {position: absolute;background-color: var(--background-color);width: 10em;visibility: hidden; /* 菜单关闭时设为隐藏 */opacity: 0; /* 菜单关闭时设为透明 */transition:opacity 0.2s linear,visibility 0s linear 0.2s; /* 给 visibility 添加 0.2s 的过渡延迟 */
}
.dropdown.is-open .dropdown__drawer {visibility: visible; /* 菜单打开时设为可见 */opacity: 1; /* 菜单打开时设为完全不透明 */transition-delay: 0s; /* 添加 is-open 类时移除过渡延迟 */
}

上述代码中，我们将过渡设置分为了两组值来定义淡出行为。第一组值为 opacity 设置了 0.2s 的过渡时间；第二组值则为 visibility 设置了 0s 的过渡（立即执行），但有 0.2s 的延迟。换句话说，先执行的是 opacity 的过渡，结束后再紧接着执行 visibility 的过渡。这样就实现了菜单的缓慢淡出，并且过渡到完全透明时可见性立刻切换为 hidden。至此，用户就可以随意点击 “Read more” 链接而不受下拉菜单的干扰了。

菜单淡入的时候，我们需要不同的顺序：此时 visibility 需要立即触发，然后再执行 opacity 的过渡。这就是为什么我们在第二个规则集中把过渡延迟设为 0s 的原因。这样一来，下拉菜单在关闭时其实是隐藏的（hidden），但在整个淡入淡出的过渡过程中都是可见的。

此外，本例中的淡出效果除了使用 CSS 过渡延迟，还可以利用 JavaScript 脚本来实现；但我发现这样要写更多代码，反而更容易出错。不过有时候为了实现想要的效果，JavaScript 脚本是绕不开的（稍后就会看到）。当过渡或动画效果可以仅凭 CSS 来实现时，使用 CSS 过渡与动画将始终是不二之选。

---

---

关于《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 预处理器简介