本頁面由 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 說明文件。