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