大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

前言

动画是体验的核心，比如引导用户从一次交互到下一次交互， 但网页的流畅动画还存在一些不足，其中包括设置进入和退出动画的能力，以及为对话框和弹出窗口等可关闭元素平滑往返顶层的动画效果。

为了填补这些空白，Chrome 116 和 117 包含了四个新的 Web 平台功能，可实现离散属性的平滑动画和过渡。这四项新功能包括：

• 能够在关键帧时间轴上（keyframe timeline）对display和content-visibility进行动画处理（从 Chrome 116 开始）。
• 带有allow-discrete关键字的transition-behavior属性可以启用离散属性的转换，例如：display（来自Chrome 117）。
• @starting-style 规则用于将入口效果（entry effects）从 display: none 动画化到顶层（从 Chrome 117 开始）。
• overlay 用于控制动画期间顶层行为（top-layer behavior）的叠加属性（来自 Chrome 117）

1.在keyframes中显示animations

从 Chrome 116 开始，可以在关键帧规则中使用 display 和 content-visibility。然后，它们将在关键帧出现时交换，不需要其他额外配置：

.card {  animation: fade-out 0.5s forwards;}@keyframes fade-out {  100% {    opacity: 0;    display: none;  }}

上面的示例在 0.5 秒的时间内将 opacity 设置为 0，然后将 display 设置为 none。 此外，forwards 关键字确保动画保持在其最终状态，以便应用到的元素始终保持 display: none 和opacity: 0。

然而，过渡无法创建非常复杂的动画，例如以下示例：

.card {  animation: spin-and-delete 1s ease-in forwards;}@keyframes spin-and-delete {  0% {    transform: rotateY(0);    filter: hue-rotate(0);  }  80% {    transform: rotateY(360deg);    filter: hue-rotate(180deg);    opacity: 1;  }  100% {    opacity: 0;    display: none;  }}

spin-and-delete 动画是退出动画。 首先，卡片将在 y 轴上旋转，进行色调旋转，然后在时间线的 80% 处，将其不透明度从 1 转换为 0。最后，卡片从 display: block 切换到 display: none。

对于退出动画，可以为动画设置触发器，而不是将它们直接应用于元素。 例如，通过将事件侦听器附加到触发类来应用动画的按钮，如下所示：

.spin-out {   animation: spin-and-delete 1s ease-in forwards;}

document.querySelector('.delete-btn').addEventListener('click', () => { document.querySelector('.card').classList.add('spin-out');})

上面的示例现在的最终状态为 display:none。在很多情况下，需要进一步删除 DOM 节点并设置超时，以便动画首先完成。

2.转换离散动画

与使用关键帧对离散属性进行动画处理不同，要使用过渡离散属性，开发者需要使用 allow-discrete。

transition-behavior属性

allow-discrete 模式让离散动画成为可能，可以将其作为 transition-behavior 的值，transition-behavior接受 normal 或者 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;}

transition 简写也是一样，可以省略该属性并在每个 transition 的末尾使用 allowed-discrete 关键字。

.card {  transition: opacity 0.5s, display 0.5s allow-discrete;}.card.fade-out {  opacity: 0;  display: none;}

如果要对多个离散属性进行动画处理，则需要在要对其进行动画处理的每个属性后面包含allow-discrete。例如：

.card {  transition: opacity 0.5s, display 0.5s allow-discrete, overlay 0.5s allow-discrete;}.card.fade-out {  opacity: 0;  display: none;}

3.入口动画的@starting-style值

到目前为止，本文已经介绍了退出动画，要创建进入动画，需要使用 @starting-style 规则。使用 @starting-style 应用浏览器在页面上打开元素之前可以查找的样式， 这是“before-open”状态。

/*  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);}

4.动画元素进出顶层

要将元素动画化到顶层或从顶层动画化，请在“打开”状态下指定@starting-style，以告诉浏览器从何处开始动画化。 对于对话框，打开状态由 [open] 属性定义, 对于弹出窗口，请使用 :popover-open 伪类。

一个简单的对话框示例如下所示：

/*   0. BEFORE-OPEN STATE   */@starting-style {  dialog[open] {    translate: 0 100vh;  }}/*   1. IS-OPEN STATE   */dialog[open] {  translate: 0 0;}/*   2. EXIT STATE   */dialog {  transition: translate 0.7s ease-out, overlay 0.7s ease-out allow-discrete, display 0.7s ease-out allow-discrete;  translate: 0 100vh;}

在下一个例子中，进入和退出效果是不同的。 通过从视口底部向上动画进入，从视口顶部退出效果。 它还使用嵌套 CSS 编写，以实现更多视觉封装。

对弹出窗口进行动画处理时，请使用 :popover-open 伪类而不是之前使用的 open 属性。

.settings-popover {  &:popover-open {    /*  0. BEFORE-OPEN STATE  */    /*  Initial state for what we're animating *in* from,         in this case: goes from lower (y + 20px) to center  */    @starting-style {      transform: translateY(20px);      opacity: 0;    }        /*  1. IS-OPEN STATE  */    /*  state when popover is open, BOTH:        what we're transitioning *in* to         and transitioning *out* from */    transform: translateY(0);    opacity: 1;  }    /*  2. EXIT STATE  */  /*  Initial state for what we're animating *out* to ,       in this case: goes from center to (y - 50px) higher */  transform: translateY(-50px);  opacity: 0;    /*  Enumerate transitioning properties,       including display and allow-discrete mode */  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;}

overlay属性

最后，要从顶层淡出弹出框或对话框，请将overlay 属性添加到过渡列表中。 popover 和dialog 将跳过剪辑和变换，并将内容放在顶层。

如果不过渡叠加，元素将立即返回到被剪切、变换和覆盖的状态，并且看不到过渡发生。

[open] {  transition: opacity 1s, display 1s allow-discrete;}

相反，应在transition 和 animation中包含overlay，以便将叠加层与其余功能一起进行动画处理，并确保在制作动画时其保留在顶层，这看起来会平滑得多。

[open] {  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;}

视图转换注意事项

如果要更改 DOM，例如在 DOM 中添加和删除元素，平滑动画的另一个很好的解决方案是视图转换，以下是使用视图转换构建的上述示例中的两个。

在第一个演示中，视图过渡将处理过渡，而不是设置 @starting-style 和其他 CSS 转换。 视图转换设置如下：

首先，在 CSS 中，为每张卡指定一个单独的视图转换名称。

.card-1 {  view-transition-name: card-1;}.card-2 {  view-transition-name: card-2;}/* etc. */

然后，在 JavaScript 中，将 DOM 变化（在本例中为移除卡片）包装在视图转换中。

deleteBtn.addEventListener('click', () => {  // Check for browser support  if (document.startViewTransition) {    document.startViewTransition(() => {      // DOM mutation      card.remove();    });  }   // Alternative if no browser support  else {    card.remove();  }})

参考资料

https://developer.chrome.com/blog/entry-exit-animations/

https://www.youtube.com/watch?app=desktop&v=lsYlEzuXq-w