360企业网站认证,如何做网站的映射,免费咨询医生回答在线,python编程自学网当前内容所在位置#xff08;可进入专栏查看其他译好的章节内容#xff09; 第五部分 添加动效 ✔️【第 15 章 过渡】 ✔️ 15.1 状态间的由此及彼15.2 定时函数 15.2.1 定制贝塞尔曲线15.2.2 阶跃 15.3 非动画属性 15.3.1 不可添加动画效果的属性15.3.2 淡入与淡出 15.4 过… 当前内容所在位置可进入专栏查看其他译好的章节内容 第五部分 添加动效 ✔️【第 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 本章小结 ✔️ 文章目录 15.4 过渡到自动高度 Transitioning to auto height15.5 自定义属性的过渡设置 Transitioning custom properties15.6 本章小结 Summary 《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 typemodulevar 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 语法值支持的合法声明如下 ——
lengthnumberpercentagelength-percentage适用于属性值或为长度值或为百分比值的情况colorimageurl即使用 url() 函数定义的属性值integerangletimeresolution例如 300dpitransform-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 与 rem2.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 还是 px12.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 本章小结 附录 附录ACSS 选择器参考附录BCSS 预处理器简介
