查看视口外的过渡

wufei123 2025-01-26 阅读:9 评论:0

css 视图转换已登陆 chrome，并且（无论好坏）现在大多数最终用户都可以广泛使用。 safari 也不甘落后，该功能已在 tp 中提供，而 firefox 至少正在开发中。我喜欢多页面转换的实现变得如此简单，但与此同时，我意识到...

查看视口外的过渡

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

<!-- on page1.html: -->
<div data-view-transition>whoosh!</div>

<!-- on page2.html: -->
<div data-view-transition>whoosh!</div>

现在您将看到 page1.html 中的 div 在导航时转换为 page2.html 上的版本。 css 中的 @view-transition at-rule 也会对整个文档启动交叉淡入淡出。过渡持续时间默认设置为 0.4 秒，但我们可以添加几行来控制它：

@property --view-transition-duration {
    syntax: "<time>";
    inherits: true;
    initial-value: 0.4s;
}

::view-transition-group(*) {
    animation-duration: var(--view-transition-duration);
}

持续时间由 --view-transition-duration 设置顶部的 @property 规则完全是可选的，但当我们设置 --view- 时，它会让动画持续时间回落到 0.4 秒而不是无效值过渡持续时间：假的。

处理视口

不过，当一个元素在页面转换时位于视口之外时，它仍然会动画，有时会进入或越过整个可见屏幕，而不指示它来自哪里或要去哪里。我觉得这种行为非常令人恼火。

通过滚动驱动的动画，我们现在有了一个可以根据滚动和视口相对位置控制样式的工具。所以我们还可以控制视图转换的触发：

@property --view-transition-duration {
    syntax: "<time>";
    inherits: true;
    initial-value: 0.4s;
}

@keyframes enable-vt {
    0%,
    100% {
        --enable-view-transitions: none;
    }
    0.1%,
    99.9% {
        --enable-view-transitions: var(--view-transition-name, default-view-transition);
    }
}

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-group(*) {
        animation-duration: var(--view-transition-duration);
    }

    [data-view-transition] {
        view-timeline-name: --enable-vt;
        view-timeline-axis: block;
        animation: linear enable-vt both;
        animation-timeline: --enable-vt;
        animation-range: cover;

        view-transition-name: var(--view-transition-name, default-view-transition);
        @supports (animation-timeline: --enable-vt) {
            view-transition-name: var(--enable-view-transitions);
        }
    }
}

enable-vt 关键帧动画无法从无平滑过渡到带有文本字符串的自定义属性，因此会进行硬剪切。当元素部分进入或离开视口时，动画范围就会触发。动画本身将 --enable-view-transition 设置为 0.1% 和 99.9% 以尽快触发。我想在我们获得动画开始或结束位置的提示后立即启用视图转换。

最后 --enable-view-transitions 由滚动驱动动画设置为无或名为 --view-transition-name 的新自定义属性。它被设置为屏幕覆盖率的 0.1% 到 99.9% 之间，禁用视口上方和下方（或左侧和右侧，无论您想要以哪种方式握住它）的视图过渡。这个新属性对于在不同元素上设置单独的动画非常有用。每个元素都可以通过为 --view-transition-name 设置唯一值来获得自己的转换。

<div data-view-transition style="--view-transition-name: my-new-transition">Whoosh</div>

这需要在源页面和目标页面上完成。如果没有设置值，则默认为default-view-transition，它统一控制所有剩余的data-view-transition元素。

现实世界的实施

我将此实现添加到我的 css 样板 ssstyles 中。在源页面和目标页面上为元素提供 data-view-transition 属性将使其在两者之间进行转换。给它一个 --view-transition-name 将让它拥有自己独特的动画，独立于其他类似元素。设置 --view-transition-duration 控制过渡的持续时间。

以上就是查看视口外的过渡的详细内容，更多请关注知识资源分享宝库其它相关文章！