文章标签

从6月11日至13日，CSS工作组（CSSWG）在西班牙科鲁尼亚举行了今年的第二次面对面会议，议程上列出了许多即将添加到语言中的新特性和改进。如果2023年为我们带来了像…这样的不可思议的进步...

CSS ::view-transition-image-pair 伪元素是视图过渡 API 的一部分，它允许我们选择视图过渡中的“前后”快照。

::view-transition-image-pair(root) {
  animation-duration: 1s;
}

CSS ::view-transition-image-new 伪元素是视图过渡 API 的一部分，它允许我们选择视图过渡中过渡到的“新”快照。

::view-transition-image-new(*) {
  animation-duration: 700ms;
}

CSS ::view-transition-image-old 伪元素是视图过渡 API 的一部分，它允许我们选择视图过渡中的“之前”快照。

::view-transition-image-old(*) {
  animation-duration: 700ms;
}

::view-transition-group 伪元素选择一个或多个容器，这些容器对单个视图过渡的各个部分进行分组。

::view-transition-group(transition-name) {
  animation-timing-function: ease-in-out;
}

看到伪元素参数中的 transition-name 标识符了吗？这就是我们如何选择特定视图过渡的方式。视图...

CSS ::view-transition 伪元素是最高级别（或“根”）元素，包含页面上定义为 CSS 视图过渡的所有动画过渡。

::view-transition {
  position: fixed;
  inset: 0;
}

CSS view-timeline-name 属性允许我们根据元素进入滚动容器（也称为“源”）的可见区域（即视窗）时的滚动位置来识别和引用要动画的元素。

.element {
  view-timeline-name: 

CSS view-transition-name 属性唯一标识可以在视图过渡中使用的元素。

card {
  view-transition-name: card-transition;
}

我们为元素提供一个名称（即 <custom-ident），我们可以引用该名称，或者将该属性设置为 none 以…

@view-transition {
  navigation: auto;
}

这直接放在你的样式表中，是视图过渡中最基本的。效果是两个页面之间的交叉淡入淡出。

Chrome 团队最初发布了一个元标签，我们可以使用它来...