startViewTransition的简单示例

用途

实现视图过渡效果

示例1

实现两张图片之间的过渡效果

startViewTransition的默认效果是对新旧视图进行fade-in和fade-out动画过渡，也就是opacity的0和1过渡。

示例2

缩放过渡

实现该效果的关键代码是.small-img和.big-img上定义的view-transition-name: img，这里的代码是告诉浏览器，帮我对view-transition-name为img的元素进行动画过渡。然后浏览器会对两个设置为同样view-transition-name的元素进行动画过渡。

需要注意的是，在同一个dom树中，不能同时存在两个view-transition-name相同的元素，所以你会看到上面的示例代码中使用visible进行了判断。

示例3

路由过渡

路由配置如下：

const routes = [
  {
    path: "/before",
    component: before,
  },
  {
    path: "/after",
    component: after,
  },
]

/before路由内容

/after路由内容

两个路由中的img元素声明了相同的view-transition-name，然后浏览器就对其进行了动画过渡。

示例4

列表与详情路由的过渡

/articles路由

/articles/:id路由

实现该效果的关键代码是.img元素上的view-transition-name: photo-${id}和.title元素上的view-transition-name: title-${id}，由于同一个页面不能有相同的view-transition-name存在，所以在这种列表过渡的情况下，我们用id给每个元素作区分。