动作是所有数字体验的核心组成部分，会引导用户从一次互动到下一次互动。但是，Web 平台上的流畅动画存在一些间隙。这些功能包括能够轻松地为进入和退出动画添加动画效果，以及针对对话框和弹出式窗口等可关闭元素在顶层与顶层之间平滑地添加动画效果。
为了填补这些缺口，Chrome 116 和 117 新增了四项网络平台功能，可针对离散属性实现流畅的动画和过渡。
这四项新功能包括：
- 能够在关键帧时间轴上为
display和content-visibility添加动画效果（在 Chrome 116 中）。 - 将
transition-behavior属性与allow-discrete关键字搭配使用，可实现离散属性转换，例如display（来自 Chrome 117）。 @starting-style规则，用于为从display: none到顶层的进入效果添加动画效果（在 Chrome 117 中）。overlay属性，用于控制动画期间的顶层行为（在 Chrome 117 中）。
在关键帧中显示动画
从 Chrome 116 开始，您可以在关键帧规则中使用 display 和 content-visibility。然后，这些内容会在关键帧出现时进行交换。无需额外的新值即可支持此功能：
.card {
animation: fade-out 0.5s forwards;
}
@keyframes fade-out {
100% {
opacity: 0;
display: none;
}
}
上例在 0.5 秒的时长内将不透明度以动画形式呈现为 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 节点，以便先播放动画。
过渡离散动画
与使用关键帧为离散属性添加动画效果不同，如需对离散属性进行过渡，您需要使用 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 简写形式末尾使用 allow-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;
}
进入动画的 @starting-style 规则
到目前为止，本文已经介绍了退出动画。如需创建进入动画，您需要使用 @starting-style 规则。
使用 @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);
}
现在，这些 TODO 列表项已具备进入和退出状态：
为与顶层的元素添加动画效果
如需为进出顶层的元素添加动画效果，请为“打开”状态指定 @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 个房源
最后，如需从顶层淡出 popover 或 dialog，请将 overlay 属性添加到过渡列表中。popover 和 dialog 对祖先剪辑和转换进行转义，同时将内容放在顶层。如果您不对 overlay 进行转换，您的元素会立即恢复为裁剪、转换和覆盖状态，并且您不会看到转换效果。
[open] {
transition: opacity 1s, display 1s allow-discrete;
}
请改为在过渡或动画中添加 overlay，以便为 overlay 与其他地图项一起添加动画效果，并确保在添加动画效果时它始终位于顶层。这样看起来会更加流畅。
[open] {
transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}
此外，如果您在顶层打开了多个元素，叠加层可帮助您控制进出顶层的平稳过渡。您可以通过这个简单的示例了解不同之处。如果在转换出第二个弹出式窗口时未对其应用 overlay，则它会先离开顶层，跳到另一个弹出式窗口之后，然后再开始转场。这不是很流畅的效果。
关于视图转换的注意事项
如果您要进行 DOM 更改（例如在 DOM 中添加和移除元素），那么另一个实现流畅动画的绝佳解决方案是视图过渡。以下是上述使用视图转换构建的两个示例。
在第一个演示中，视图转换将处理转换，而不是设置 @starting-style 和其他 CSS 转换。视图转换的设置方式如下：
首先，在 CSS 中，为每个卡片分别指定一个 view-transition-name。
.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();
}
})
现在，浏览器可以处理每张卡片的淡出并将其变形到新位置。
另一个适合执行此操作的例子是添加/删除列表项演示。在这种情况下，您需要记住为创建的每张卡片添加一个唯一的 view-transition-name。
总结
这些新的平台功能让我们离在 Web 平台上流畅的进入和退出动画又近了一步。如需了解详情，请访问以下链接：