视图过渡中的'类型”描述符到底是什么？

>曾经研究过新的东西只是为了找到很少的信息吗？这是探索未知的数字领域的令人沮丧而令人兴奋的悖论。 最近，我在记录 attrule及其@view-transition>描述符时遇到了这一点。types>

>您可能熟悉跨文档视图过渡：网页之间的CSS供电过渡，以前需要JavaScript框架和动画库。 启动过渡涉及在两个页面上设置

>描述符，从而产生平滑的交叉效果。navigation auto

简单，对吗？

@view-transition {
  navigation: auto;
}

是通常的描述符。但是还有另一个文献记录的兄弟姐妹：

> descriptor。 navigation理解types>描述符

跨文档视图过渡是相对较新的，因此正在进行全面的探索。 令人惊讶的是，描述符经常被忽略。一些文档完全忽略了它。 CSS规范提供了以下澄清：types

types描述符在捕获或执行过渡时设置过渡的活动类型。

更具体地说，

>接受活动类型名称的空格分隔列表（as ）或types>如果没有活动类型，

名称：types <custom-ident></custom-ident>none

> for：
• types
• 值： | @view-transition
• 初始： none <custom-ident> </custom-ident>
• >示例用法： none但是什么是“活动”类型？ 让我们深入研究。

活动类型：裁缝过渡

@view-transition {
  navigation: auto;
  types: bounce;
}

/* Or a list */
@view-transition {
  navigation: auto;
  types: bounce fade rotate;
}

挑战：

一个通用的交叉效率动画很有用，但是通常我们需要基于导航上下文的过渡自定义。 例如，分页的内容可能会向右/向左滑动，而社交媒体配置文件单击可以在过渡过程中持续遵守配置文件图像。 定义多个过渡直接导致冲突。 我们需要选择性过渡激活。

解决方案：

活动类型确定哪些过渡执行以及哪些元素参与。 在CSS中，具有特定活性类型的 pseudo-class目标元素。 如果我们将定义为活动类型，则只有在满足条件时才激活

动画。

>

@view-transition {
  navigation: auto;
}

这可以防止冲突的过渡。 重要的是，这仅影响到页面的过渡，而不是从中转换，从而基于目标页面实现自定义的过渡。> >通过

>描述符控制的演示示例

和bounce在此处可用slide>。 完整的代码位于github [link to-github]上。types> JavaScript的增强角色 > CSS单独将控制限制为基于目标页面的过渡。 更复杂的场景，例如我们的分页和社交媒体示例，都需要了解源页面。 活动类型可以通过三种方式填充：

通过

>参数。

使用过渡的

属性动态突变。

>
1. 使用startViewTransition(callbackOptions)>描述符声明（如上所述）。
>
2. types>选项2，使用
>事件，允许按需活动类型设置，从而基于源和目标页面启用上下文感知的过渡。 有必要进一步探索该方法。
3. > types有关活动类型的更深入研究，请参见：

在跨文档视图过渡中查看过渡类型（bramus）

pagereveal使用JavaScript（Umar Hansa）自定义视图过渡的方向

以上是视图过渡中的'类型”描述符到底是什么？的详细内容。更多信息请关注PHP中文网其他相关文章！