本頁面由 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. 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;
}

/*  1. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  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 }
  ]
}
*/