View Transitions API 从原生 DOM 到 Remix 框架

一、简介

View Transitions 目前是一门实验性的技术,在部分浏览器中已经实现,它的 API提供了一种机制,可以轻松地在不同 DOM 状态之间创建动画转换,同时还可以一步更新 DOM 内容。以下是 View Transitions 解决的核心问题:

  • 处理新旧内容的加载和定位。
  • 对旧状态和新状态进行动画处理以创建过渡。
  • 防止用户与旧内容的意外交互导致问题。
  • 转换完成后删除旧内容。

二、兼容性

目前在 chrome 内核的浏览器支持的比较好。

三、js-api

js 相关的实例属性和实例方法

  • const vt = document.startViewTransition(callback)
  • vt.finished
  • vt.Experimental
  • vt.ready
  • vt.skipTransition()

callback 中可以做 dom 相关的操作

四、css-api

css 复制代码
figcaption {
  view-transition-name: figure-caption;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
}

五、基础示例

在 原生 Js 中使用时判断 document.startViewTransition 是否存在,不存在直接执行相关的 dom 操作,并且返回,存在的话在其 startViewTransition 回调函数中 进行 dom 擦作

ts 复制代码
const domOP = () => {
  if (!document.startViewTransition) {
    // domOp 降级用法
    return;
  }
  document.startViewTransition(() => {
    // dom op
  });
};

六、与 css 动画配合

css 复制代码
 view-transition-name: box;
 
 @keyframes box-out {
  from {
    transform: rotateX(0);
    opacity: 1;
  }
  to {
    transform: rotateX(180deg);
    opacity: 0;
  }
}
@keyframes box-in {
  from {
    transform: rotateX(180deg);
    opacity: 0;
  }
  to {
    transform: rotateX(0);
    opacity: 1;
  }
}
::view-transition-old(box) {
  animation-name: box-out;
}
::view-transition-new(box) {
  animation-name: box-in;
}

七、 伪元素树

ruby 复制代码
::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

view 有自己的特殊元素树结构。

八、在 React 中使用

React 中直接使用 document.startViewTransition 函数,创建 ViewTransition 过渡:

tsx 复制代码
export default function Index() {
  const [show, setShow] = useState(false);
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
      <h1>Welcome to Remix</h1>
      <button onClick={() => {
        // setShow(!show)
        document.startViewTransition(() => {
          setShow(!show)
        })
      }}>toggle show</button>
      {
        show ? <div>this is show</div> : <div>this is not show</div>
      }
    </div>
  );
}

在 startViewTransition 回调函数中,通过状态控制 dom 的渲染,达到 ViewTransition 的

九、在 react-router 中使用

  • 属性:unstable_viewTransition
  • 钩子函数:unstable_useViewTransitionState
ts 复制代码
import { unstable_useViewTransitionState, Link } from 'react-router-dom'

export function NavImage({ src, alt }: { src: string; alt: string }) {
  const vt = unstable_useViewTransitionState('/img');
  return (
    <Link to='/img' unstable_viewTransition>
      <img
        src={src}
        alt={alt}
        style={{
          viewTransitionName: vt ? "image-expand" : "",
        }}
      />
    </Link>
  );
}

十、在 remix 中使用

  • navigate 导航
  • submit 提交数据
  • Link 组件
ts 复制代码
import { Link } from "@remix-run/react";
<Link to={to} unstable_viewTransition> Click me </Link>
  • NavLink 组件
ts 复制代码
import { NavLink } from "@remix-run/react";
<NavLink to={to} unstable_viewTransition>
  <p>Image Number {idx}</p>
  <img src={src} alt={`Img ${idx}`} />
</NavLink>
  • Form 组件
ts 复制代码
import { Form } from "@remix-run/react";
<Form unstable_viewTransition>
    <input type="text" />
</Form>

十一、其他 Astro

  • Astro 中也直接支持了 View Transitions API, Astro 提供了一个 <ViewTransitions /> 路由组件,可以添加到单个页面的 <head> 中,以控制页面在导航到另一个页面时的过渡效果。

十二、小结

本文主要讲解了实验性的 View Transitions API 简单使用教程,从原生 JS 中的用法到 React,然后到 React Router 以及 Remix 对其的支持。不仅仅在 React 技术栈,在 Astro 中也实现此功能,View Transitions 实用程度比较好,尤其是在路由过渡的时候,本探究入门,复杂的交互效果需要更加深入的探索。

相关推荐
lifallen11 分钟前
Paimon 原子提交实现
java·大数据·数据结构·数据库·后端·算法
天天扭码12 分钟前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder15 分钟前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte20 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang24 分钟前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
舒一笑1 小时前
PandaCoder重大产品更新-引入Jenkinsfile文件支持
后端·程序员·intellij idea
中微子1 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
PetterHillWater1 小时前
AI编程之CodeBuddy的小试
后端·aigc
Eighteen Z1 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录2 小时前
虚拟DOM
前端·vue.js·dom