以下是您有必要知道的信息:
- 利用三项新的 CSS 功能,可以轻松添加流畅的进入和退出动画。
- 使用数组分组计算高阶数据集。
- 开发者工具可以简化本地替换项。
- 还有许多更多内容。
我是 Adriana Jara。我们来深入了解下,看看 Chrome 117 会为开发者带来哪些新变化。
用于进入和退出动画的新 CSS 功能。
这三项新的 CSS 功能可完成整个设置,以便轻松添加进入和退出动画,以及从顶层可关闭元素(例如对话框和弹出式窗口)之间平滑地添加动画效果。
第一个功能是 transition-behavior
。如需转换离散属性(例如 display
),请为 transition-behavior
使用 allow-discrete
值。
.card {
transition: opacity 0.25s, display 0.25s;
transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}
.card.fade-out {
opacity: 0;
display: none;
}
然后,使用 @starting-style
规则为从 display: none
到顶层的进入效果添加动画效果。使用 @starting-style
应用一种样式,浏览器可以在相应元素在网页上打开之前查询该样式。
/* 0. BEFORE-OPEN STATE */
/* Starting point for the transition */
@starting-style {
.item {
opacity: 0;
height: 0;
}
}
/* 1. IS-OPEN STATE */
/* The state at which the element is open + transition logic */
.item {
height: 3rem;
display: grid;
overflow: hidden;
transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}
/* 2. EXITING STATE */
/* While it is deleting, before DOM removal in JS, apply this
transformation for height, opacity, and a transform which
skews the element and moves it to the left before setting
it to display: none */
.is-deleting {
opacity: 0;
height: 0;
display: none;
transform: skewX(50deg) translateX(-25vw);
}
最后,如需从顶层淡出 popover
或 dialog
,请将 overlay
属性添加到过渡列表中。在转场效果或动画中添加叠加层,为叠加层与其余地图项一起添加动画效果,并确保在添加动画效果时它始终位于顶层。这样看起来会更加流畅。
[open] {
transition: opacity 1s, display 1s allow-discrete;
}
[open] {
transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}
如需详细了解如何使用这些功能来改善动画的用户体验,请参阅四个新的 CSS 功能,实现流畅的进入和退出动画。
数组分组
在编程中,数组分组是一种极为常见的操作,在使用 SQL 的 GROUP BY 子句和 MapReduce 编程(可以更好地将其视为 map-group-reduce)时最常出现。
通过将数据组合成组的能力,开发者能够计算更高阶的数据集。例如,同类群组的平均年龄或网页的每日 LCP 值。
数组分组通过添加 Object.groupBy
和 Map.groupBy
静态方法实现这些场景。
groupBy
会针对可迭代对象中的每个元素调用一次提供的回调函数。回调函数应返回一个字符串或符号,指示关联的元素组。
在以下示例中,MDN 文档中有一个商品数组,其中的 groupBy
方法用于返回按类型分组的商品。
const inventory = [
{ name: "asparagus", type: "vegetables", quantity: 5 },
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "goat", type: "meat", quantity: 23 },
{ name: "cherries", type: "fruit", quantity: 5 },
{ name: "fish", type: "meat", quantity: 22 },
];
const result = Object.groupBy(inventory, ({ type }) => type);
/* Result is:
{
vegetables: [
{ name: 'asparagus', type: 'vegetables', quantity: 5 },
],
fruit: [
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "cherries", type: "fruit", quantity: 5 }
],
meat: [
{ name: "goat", type: "meat", quantity: 23 },
{ name: "fish", type: "meat", quantity: 22 }
]
}
*/
如需了解详情,请参阅 groupBy
文档。
在开发者工具中简化本地替换。
我们已简化了本地替换功能,因此您无需访问网络面板即可轻松模拟远程资源的响应标头和 Web 内容。
如需覆盖 Web 内容,请打开网络面板,右键点击相应请求,然后选择覆盖内容。
如果您已设置本地替换项但已停用,则开发者工具会启用这些替换项。如果您尚未设置,开发者工具会在顶部的操作栏中提示您。选择一个存储替换项的文件夹,并允许开发者工具访问该文件夹。
设置替换项后,开发者工具会随即将您转到来源 > 替换项 > 编辑器,以便您可以替换 Web 内容。
请注意,被覆盖的资源在 Network 面板中用 指示。将鼠标悬停在该图标上即可查看被替换的内容。
如需详细了解 Chrome 117 中的开发者工具,请查看开发者工具的新变化。
还有更多其他奖励!
当然还有许多其他功能。
备受期待的
grid-template-columns
和grid-template-rows
的subgrid
值现已在 Chrome 中实现。我们会针对
unload
事件弃用提供WebSQL
弃用试用和开发者试用。适用于 bfcache 的
notRestoredReasons
API(适用于 Chrome 116 的视频中提到)应该会在此版本中推出。
深入阅读
这里仅介绍一些重要的亮点。如需了解 Chrome 117 中的其他变化,请点击以下链接。
- Chrome 开发者工具的新变化 (117)
- Chrome 117 弃用和移除
- 针对 Chrome 117 的 ChromeStatus.com 更新
- Chromium 源代码库更改列表
- Chrome 发布日历
订阅
如需随时了解最新动态,请订阅 Chrome Developers YouTube 频道,每当我们发布新视频时,您都会收到电子邮件通知。
嗨,Adriana Jara!Chrome 117 发布后,我会在这里告诉大家 Chrome 的新变化!