css 视图转换已登陆 chrome，并且（无论好坏）现在大多数最终用户都可以广泛使用。 safari 也不甘落后，该功能已在 tp 中提供，而 firefox 至少正在开发中。
我喜欢多页面转换的实现变得如此简单，但与此同时，我意识到它们的一个大问题：超出视口的元素开始疯狂地四处飘荡。
我的博客用一些 javascript 来处理这个问题。 intersectionobserver 在可见时在自定义属性中设置视图转换名称。只要它不在视线范围内，该属性就不会设置，并且不会触发转换。它可以工作，但需要 html、javascript 和 css 相互依赖。本着让 css 表现更重要的精神，我想要一个更简单的解决方案。
chrome 最近推出了另一个可能会有所帮助的功能：滚动驱动的动画。遗憾的是，这仅在 chrome 中可用。 firefox 将其置于标志后面，而 safari 则没有显示任何活动迹象。但我们可以优雅地回退，要么使用前面提到的 javascript 解决方案，要么干脆忽略视口检测并显示动画（在撰写本文时，safari 就是这种情况）。
一个简单的过渡
让我们把它们放在一起，从视图转换本身开始：
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } [data-view-transition] { view-transition-name: var(--view-transition-name, default-view-transition); }}
whoosh!whoosh!
现在您将看到 page1.html 中的 div 在导航时转换为 page2.html 上的版本。 css 中的 @view-transition at-rule 也会对整个文档启动交叉淡入淡出。过渡持续时间默认设置为 0.4 秒，但我们可以添加几行来控制它：
@property --view-transition-duration { syntax: "
持续时间由 –view-transition-duration 设置 顶部的 @property 规则完全是可选的，但当我们设置 –view- 时，它会让动画持续时间回落到 0.4 秒而不是无效值过渡持续时间：假的。
MyBatis3.2.3帮助文档 中文CHM版
MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架。MyBatis 消除 了几乎所有的 JDBC 代码和参数的手工设置以及结果集的检索。MyBatis 使用简单的 XML 或注解用于配置和原始映射,将接口和 Java 的 POJOs(Plan Old Java Objects,普通的 Java 对象)映射成数据库中的记录。有需要的朋友可以下载看看
1 查看详情
处理视口
不过，当一个元素在页面转换时位于视口之外时，它仍然会动画，有时会进入或越过整个可见屏幕，而不指示它来自哪里或要去哪里。我觉得这种行为非常令人恼火。
通过滚动驱动的动画，我们现在有了一个可以根据滚动和视口相对位置控制样式的工具。所以我们还可以控制视图转换的触发：
@property --view-transition-duration { syntax: "
enable-vt 关键帧动画无法从无平滑过渡到带有文本字符串的自定义属性，因此会进行硬剪切。当元素部分进入或离开视口时，动画范围就会触发。动画本身将 –enable-view-transition 设置为 0.1% 和 99.9% 以尽快触发。我想在我们获得动画开始或结束位置的提示后立即启用视图转换。
最后 –enable-view-transitions 由滚动驱动动画设置为无或名为 –view-transition-name 的新自定义属性。它被设置为屏幕覆盖率的 0.1% 到 99.9% 之间，禁用视口上方和下方（或左侧和右侧，无论您想要以哪种方式握住它）的视图过渡。这个新属性对于在不同元素上设置单独的动画非常有用。每个元素都可以通过为 –view-transition-name 设置唯一值来获得自己的转换。
Whoosh
这需要在源页面和目标页面上完成。如果没有设置值，则默认为default-view-transition，它统一控制所有剩余的data-view-transition元素。
现实世界的实施
我将此实现添加到我的 css 样板 ssstyles 中。在源页面和目标页面上为元素提供 data-view-transition 属性将使其在两者之间进行转换。给它一个 –view-transition-name 将让它拥有自己独特的动画，独立于其他类似元素。设置 –view-transition-duration 控制过渡的持续时间。
以上就是查看视口外的过渡的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1152135.html
微信扫一扫 
支付宝扫一扫 
