视图过渡以动画形式呈现,在不同状态之间实现无缝过渡 网页或应用界面的位置通过 查看 Transition API 旨在 与原来相比,你可以用更简单、更高效的方式 这是可能的。与之前的 API 相比, JavaScript 方法包括:
- 改进的用户体验:流畅的过渡和视觉提示可引导用户 使导航感觉自然、不突兀。
- 视觉上的连贯性:确保视图之间的连贯性 降低认知负荷,帮助用户在应用内保持专注。
- 性能:API 尽量减少主线程资源的使用 这会创建更流畅的动画。
- 美观现代:经过改进的转场效果会让画面更加精美 打造卓越的用户体验。
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
这篇帖子 属于某个系列 探讨电子商务公司 使用新的 CSS 和界面功能改进其网站。在本文中,您将了解 了解一些公司如何实现 View Transition API 并使其获益。
redBus
一直以来,redBus 都致力于在原生广告和网络内容之间 体验在 View Transition API 之前,实现这些 制作动画效果颇具挑战。但有了 API 直观,能够在多个用户体验历程中实现转场, 体验更接近应用的体验再加上性能优势, 都必须在所有网站上提供。—Amit Kumar,高级工程团队 redBus 经理。
该团队在多个位置实现了视图过渡。下面是一个示例 首页上登录图标的淡入和滑入动画的组合 页面。
<ph type="x-smartling-placeholder">代码
此实现使用多个view-transition-name
和自定义动画
(scale-down
和scale-up
)。将 view-transition-name
与唯一值结合使用
将登录组件与页面的其余部分分开,以动画形式
。创建新的唯一 view-transition-name
也会创建新的
::view-transition-group
(如下所示)
代码),使其可与默认值分开操作
::view-transition-group(root)
。
::view-transition
├─::view-transition-group(root)
│ └─…
├─::view-transition-group(signin)
│ └─…
└─::view-transition-group(signinclose)
└─…
//Code for VT for login
if (!document.startViewTransition) {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
} else {
const transition = document.startViewTransition();
transition.ready.finally(() => {
setTimeout(() => {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
}, 500);
});
}
.signin_open {
view-transition-name: signin;
}
.signin_close {
view-transition-name: signinclose;
}
::view-transition-group(signin),
::view-transition-group(signinclose) {
animation-duration: 0.5s;
}
::view-transition-old(signin) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
::view-transition-new(signin) {
animation-name: -ua-view-transition-fade-in, scale-up;
}
::view-transition-new(signinclose) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
@keyframes scale-down {
to {
scale: 0;
}
}
@keyframes scale-up {
from {
scale: 0;
}
}
Tokopedia
该团队使用视图过渡来添加在用户切换时淡入淡出的动画 。
实现非常简单,通过使用
startViewTransition
,我们可以立即 将会获得比先前实现更令人愉悦的淡入淡出转场效果 不产生任何影响—Andy Wihalim,高级软件 Tokopedia 工程师。
之前
之后
代码
以下代码使用 React 框架,并包含特定于框架的代码,
例如,flushSync.
详细了解如何使用框架来实现视图
过渡效果。
这是一个基本实现,用于检查浏览器是否支持
startViewTransition
,如果是,则进行转换。否则,它会回退
默认行为
const handleClick =
({ url, index }) =>
() => {
if ('startViewTransition' in document) { //check if browser supports VT
document.startViewTransition(() => {
flushSync(() => {
setDisplayImage({ url, index });
setActiveImageIndex(index);
});
});
} else { //if VT is not supported, fall back to default behavior
setDisplayImage({ url, index });
setActiveImageIndex(index);
}
};
...
<Thumbnail onClick={handleClick({url, index})} />
政策集市
Policybazaar 展馆 投资 在“为什么购买”、 提高其视觉吸引力,并改进此类功能的使用。
。 <ph type="x-smartling-placeholder">通过采用 View Transitions,我们消除了重复的 CSS 和 JavaScript 用于管理各种状态的动画的代码。已保存 并显著改善了用户体验。—Aman Soni,Policybazaar 技术主管。
代码
以下代码与前面的示例类似。需要注意的一点是
覆盖默认样式和动画的功能,
::view-transition-old(root)
和::view-transition-new(root)
。在此示例中
默认 animation-duration
已更新为 0.4 秒。
togglePBAdvantagePopup(state: boolean) {
this.showPBAdvantagePopup = state;
if(!document.startViewTransition) {
changeState();
return;
}
document.startViewTransition(() => {changeState();});
function changeState() {
document.querySelector('.block_section').classList.toggle('hide');
document.querySelector('.righttoggle_box').classList.toggle('show');
}
}
.righttoggle_box{
view-transition-name: advantage-transition;
}
.block_section{
view-transition-name: advantage-transition;
}
::view-transition-old(root), ::view-transition-new(root) {
animation-duration: 0.4s;
}
使用 View Transition API 时的注意事项
在同一页面上使用多个视图过渡效果时,请确保您 为每个效果或部分设置不同的 view-transition-name 冲突。
当视图转换处于活动状态(转换)时,会在
位于界面其余部分的顶部因此,请避免在鼠标悬停时触发转场,因为
意外触发 mouseLeave
事件时(当实际光标位于
还未移动)。
资源
- 使用 View Transition API 实现轻松顺畅的转场
- 解说:MPA 的视图过渡
- 案例研究:通过视图过渡实现无缝导航
- 案例研究:Web Can Do What!?|提供类似应用的导航
- 互操作性建议:让视图过渡效果可在各种浏览器中使用
- 您想要报告 bug 或请求新功能吗?我们希望听到您的反馈意见 SPA 和 MPA。
敬请阅读本系列中的其他文章,了解电子商务如何
公司受益于新推出的 CSS 和界面功能,例如滚动驱动型
动画、弹出式窗口、容器查询和 has()
选择器。