【CSS in Depth 2 精译_094】16.2：CSS 变换在动效中的应用（下）——导航菜单的文本标签“飞入”特效与交错渲染效果的实现
当前内容所在位置（可进入专栏查看其他译好的章节内容）
- 第五部分 添加动效 ✔️
- 【第 16 章 变换】 ✔️
- 16.1 旋转、平移、缩放与倾斜
- 16.1.1 变换原点的更改
- 16.1.2 多重变换的设置
- 16.1.3 单个变换属性的设置
- 16.2 变换在动效中的应用
- 16.2.1 放大图标（上）
- 16.2.2 带“飞入”特效的文本标签的创建（下） ✔️
- 16.2.3 过渡特效的交错渲染（下） ✔️
- 16.3 动画的性能
文章目录
- 16.2.2 带“飞入”特效的文本标签的创建 Creating “fly in” labels
- 16.2.3 过渡特效的交错渲染 Staggering the transitions
《CSS in Depth》新版封面
译者按
本篇为 16.2 节的下篇，主要介绍剩下两个功能点的视线：飞入特效与菜单项的延迟交错渲染。看似小小一个导航菜单，其交互效果实现起来却一点都不简单。前端开发早已不是完整页面的实现了，更多情况下是结合前端框架进行组件化开发；但无论组件细分到什么程度，CSS 需要处理的细节样式问题一个都少不了，划分组件往往只解决了“如何省力”的问题，始终解决不了“如何省功”这个关键点。想要“省功”，只有先筑牢 CSS 基础，再大量实践，不断复盘提炼，才有可能趋近这个终极目标。
16.2.2 带“飞入”特效的文本标签的创建 Creating “fly in” labels
菜单标签不必一直保持可见状态。默认情况下可以将其隐藏，只在相应位置保留图标告诉用户菜单的位置即可。当用户移动鼠标到菜单或者导航元素上时，再把标签以淡入的方式展示出来。这样，只要鼠标一靠近图标，整个导航菜单就都渲染出来了，其间会用到多个特效：背景和文本标签都使用了淡入特效，且标签是从最终位置略偏左一点开始过渡的（如图 16.9 所示）。
【图 16.9 鼠标悬停时，菜单淡入，文本标签则从左侧滑动淡入】
整个特效中，文本标签同时用到了两个不同的过渡特效：一个是针对透明度，另一个则针对平移变换。试根据代码清单 16.10 同步更新本地样式表。
代码清单 16.10 导航菜单项的过渡特效示例样式代码
@media (min-width: 480px) {.nav-links {display: block;padding: 1em;margin-block-end: 0;}.nav-links__label {display: inline-block; /* 令标签为行内块级元素，以便对其设置变换 */margin-left: 1em;padding-right: 1em;opacity: 0; /* 标签初始隐藏 */translate: -1em; /* 令标签左移 1em *//* 为有变更的属性值设置过渡特效： */transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3), opacity 0.4s linear;}.nav-links:hover .nav-links__label,.nav-links:focus-within .nav-links__label {opacity: 1; /* 鼠标悬停或聚焦状态下，令标签可见 */translate: 0; /* 鼠标悬停或聚焦状态下，令标签同时平移回原位 */}.nav-links__icon {transition: transform 0.2s ease-out;}.nav-links a:hover > .nav-links__icon,.nav-links a:focus > .nav-links__icon {transform: scale(1.3);}
}
该导航菜单尽管只占了屏幕的一小部分，但实际上包含了很多样式；其中某些菜单选择器还写得又长又复杂。
留意上述代码在顶层的 nav-links 元素上添加的 :hover 与 :focus-within 这两个伪类样式。这样一来，无论是用户鼠标划过菜单，还是通过键盘上 Tab 键让菜单项获得焦点，所有标签都会立刻渲染出来。
在隐藏状态下，文本标签利用 translate() 函数向左平移了 1em；而在淡入过程中，又通过过渡特效回到了原来的位置。这里省略了 translate() 函数的第二个参数，只设置了 x 的值，这样就只产生水平位移。因为元素无需上下移动，所以这样写也没问题。
而自定义的 cubic-bezier() 三次贝塞尔函数值得重点关注。它产生了一个弹跳特效：标签向右移动时超出了最终停止的位置，然后再回到最终位置停下来。其运动曲线效果如图 16.10 所示。
【图 16.10 终点处带弹跳特效的贝塞尔曲线示意图】
我们发现贝塞尔曲线超出了上边框，这就意味着数值超过了过渡特效的最终值。在从 translate: -1em 过渡到 translate: 0 期间，文本标签的变换会短暂到达超出最终数值约 0.15em 的位置，然后再缓缓回到最终数值。同理，我们也可以在定时函数的初始阶段添加弹跳效果，即把第一个控制柄移至矩形框底边以外。但过渡曲线是不可能超出左右两侧边缘的，这不合逻辑。
在浏览器中加载页面，查看最终的过渡效果。弹跳过程一闪而过（subtle），估计得调慢过渡时间才能更好地进行观察调试。这样看上去像是给文本标签引入了重量和动能，使得运动过程更加自然。
16.2.3 过渡特效的交错渲染 Staggering the transitions
至此，导航菜单看上去已经非常不错了，我们最后再做一次优化，让它更加精致。我们会用到 transition-delay 属性，为每个菜单项设置不同的延迟时间。这样就可以让每段飞入动画交错渲染，而不是一次性全部渲染出来，犹如翻滚的 “波浪”（如图 16.11 所示）。
【图 16.11 各导航菜单项将从上到下依次飞入渲染】
要实现这样的页面效果，需要用到 :nth-child() 伪类选择器，根据每个菜单项在列表中的位置进行选中，然后分别给每个菜单项设置连续变长的过渡延迟。请将下列代码清单 16.11 给出的示例样式代码更新到本地样式表，并放在 nav-llinks 样式规则的后面。
代码清单 16.11 为菜单项添加带交错渲染效果的过渡延迟示例代码
.nav-links:hover .nav-links__label,
.nav-links:focus-within .nav-links__label {opacity: 1;translate: 0;
}
.nav-links > li:nth-child(2) .nav-links__label { /* 选中第二个菜单项的标签 */transition-delay: 0.1s; /* 为过渡设置 0.1s 的延迟 */
}
.nav-links > li:nth-child(3) .nav-links__label { /* 选中第三个菜单项的标签 */transition-delay: 0.2s; /* 为过渡设置 0.2s 的延迟 */
}
/* 根据实际需求重复上述操作 */
.nav-links > li:nth-child(4) .nav-links__label {transition-delay: 0.3s;
}
.nav-links > li:nth-child(5) .nav-links__label {transition-delay: 0.4s;
}
选择器 :nth-child(2) 选中的是列表项中的第二项，我们给它加上一些延迟。第三项（即 :nth-child(3)）上的延迟时间稍长一点，第四、五项的又分别再长一点。我们不需要为第一个元素项操心，因为我们希望首个元素的过渡特效立即生效，无需延迟。
在浏览器中重新加载页面，并用鼠标划过导航菜单来查看效果。整个菜单显得流畅生动。鼠标移开时，所有元素又以同样的交错顺序淡出屏幕。
我们发现这种实现方式存在一个缺点，即菜单项必须和所写的选择器数量一样多。示例代码针对第五个元素也添加了延迟规则，尽管当前的导航菜单只有四个元素。这是一种预防措施（safeguard），以防将来再增加一个菜单项。虽然安全起见我们甚至可以为第六个元素添加规则，但需要意识到菜单数量总是有可能在某个时间点超出已有样式规则的，届时一定要记得在 CSS 中同步添加更多的规则。
提示
类似的重复代码块可以使用预处理器来进行简化。相关示例参见 附录 B。
这样导航菜单就大功告成了，接下来可以给页面添加更多内容。我们将在下一章继续实现，因此请保留示例页面以便随时添加新内容。在此之前，还有几件和变换效果有关的事项需要了解。
关于《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 本章小结
- 第 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 本章小结
- 附录
- 附录A：CSS 选择器参考
- 附录B：CSS 预处理器简介