编辑“︁Vue.js路由过渡效果”︁（章节）

== 实际应用案例 ==

=== 电商网站产品详情页过渡 ===

当用户从产品列表点击进入产品详情时，可以使用以下过渡效果：

1. 列表项缩略图放大过渡到详情页主图
2. 产品信息从右侧滑入
3. 价格信息从底部淡入

实现代码：

<syntaxhighlight lang="html">
<transition name="product-transition" mode="out-in">
  <router-view></router-view>
</transition>

<style>
.product-transition-enter-active {
  transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.product-transition-leave-active {
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.product-transition-enter {
  opacity: 0;
  transform: translateX(30px);
}
.product-transition-leave-to {
  opacity: 0;
  transform: scale(0.95);
}
</style>
</syntaxhighlight>

=== 管理后台页面切换 ===

管理后台常见的面包屑导航过渡效果：

<mermaid>
graph LR
    A[仪表盘] -->|slide-right| B[用户管理]
    B -->|slide-right| C[用户详情]
    C -->|slide-left| B
    B -->|slide-left| A
</mermaid>

实现代码：

<syntaxhighlight lang="javascript">
// 在路由守卫中设置过渡方向
router.beforeEach((to, from, next) => {
  const toDepth = to.path.split('/').length
  const fromDepth = from.path.split('/').length
  to.meta.transition = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  next()
})
</syntaxhighlight>