查看视口外的过渡

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: "";
    inherits: true;
    initial-value: 0.4s;
}

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

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

佳可商务购物程序 2004

在原版的基础上做了一下修正评论没有提交正文的问题特价商品的调用连接问题去掉了一个后门补了SQL注入补了一个过滤漏洞浮动价不能删除的问题不能够搜索问题收藏时放入购物车时出错点放入购物车弹出2个窗口修正主题添加问题商家注册页导航连接问题销售排行不能显示更多问题热点商品不能显示更多问题增加了服务器探测 增加了空间使用查看 增加了在线文件编辑增加了后台管理里两处全选功能更新说明：后台的部分功能已经改过前台

下载

处理视口

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

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

@property --view-transition-duration {
    syntax: "";
    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 设置唯一值来获得自己的转换。

Whoosh

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

现实世界的实施

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