Chrome 117 正式发布，新增数组分组、流畅的进入退出动画和简化的本地重载
美国时间 2023.09.12 日，Chrome 117 版本正式发布，带来众多特性更新：
三个新的 CSS 功能可轻松添加流畅的进入和退出动画。 使用数组分组计算高阶数据集。 DevTools 让本地覆盖更轻松。
当然还包含大量的修复和改进。
1.Chrome 117 版本摘要
发布版本号： Windows: 117.0.5938.62/.63 Linux 与 Mac: 117.0.5938.62 Android: 117.0.5938.60 发布日期：2023 年 9 月 12 日 兼容性：Windows 11、10（32 位和 64 位）、Linux、macOS、iOS 和 Android。
2.新 CSS 功能：进入和退出动画
这三个新的 CSS 功能使您可以轻松添加进入和退出动画，并流畅地将对话框和弹出窗口等顶层不可取元素制作成动画。
transition-behavior。
为了过渡离散属性，可以给 transition-behavior 属性设置 allow-discrete 值。
@starting-style
这个规则允许在第一个样式更新时启动 CSS 过渡效果。在元素的第一个样式更新时，或者当显示类型从 none 更改为其他类型时，CSS 过渡效果不会从初始样式触发过渡效果。这是为了避免意外的初始样式过渡效果。要在第一个样式更新时启动过渡效果，现在可以在 @starting-style 规则内部应用样式。
overlay
overlay 属性使开发人员能够在退出过渡时将元素保持在顶层。overlay 属性用于指示元素是否位于顶层，它可以取两个值：none 或 auto。
/* 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);
}
[open] {
transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}
最后，要从顶层淡出弹出窗口或对话框，可在过渡效果列表中添加 overlay 属性。在过渡或动画中加入叠加，使叠加与其他功能一起成为动画，并确保在动画时保持在顶层。这样看起来会更流畅。
2.数组分组
数组分组是一种非常常见的操作，最好的例子是 SQL 的 GROUP BY 子句和 MapReduce 编程（更好地理解为 map-group-reduce）。
将数据组合成分组的能力使开发人员能够计算更高级的数据集，比如一个群体的平均年龄或网页每日 LCP 值。
通过添加 Object.groupBy 和 Map.groupBy 静态方法，该功能实现了这一点。groupBy 为可迭代元素中的每个元素调用一次提供的回调函数。回调函数应返回一个字符串或符号，表示相关元素的分组。如下示例：
3.简化 DevTools 中的本地重载功能
本地重载功能现在得到了简化，因此你可以轻松地从网络面板上模拟远程资源的响应头和网页内容，而无需访问它们。在本地调试接口、Mock数据和修改页面超级方便👍🏻！
为了重载网页内容，打开 DevTools 的 network 面板，然后右键，选择 Override content。
如果您已设置但禁用了本地重载，DevTools 会启用它们。如果尚未设置，DevTools 会在顶部的操作栏中提示您。选择一个文件夹来存储重载的文件，并允许 DevTools 访问该文件夹。见下方截图：
设置好重载后，DevTools 会带你进入 source > override > editor 面板，让你重载网页内容。
请注意，被覆盖的资源会在网络面板中显示出来。将鼠标悬停在Saved. 图标上，即可看到被覆盖的资源。
4.其他特性
备受期待的 grid-template-columns 和 grid-template-rows 的子网格值现已在 Chrome 浏览器中实现。 提供了 WebSQL 废弃试用版和卸载事件废弃试用版的开发人员试用版。 BFCache 的 notRestoredReasons API 也将在该版本中推出。