本頁面由 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 }
  ]
}
*/