此页面由 Cloud Translation API 翻译。

Chrome 117 的新变化

Adriana Jara

以下是您需要知晓的相关信息：

三项新的 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 文档。