卡比记账项目——路由与动画切换动画效果之前已经做好了四个欢迎界面，并且通过RouterLink实现跳转。但是切换过程

切换动画效果

之前已经做好了四个欢迎界面，并且通过RouterLink实现跳转。

截屏2022-10-11 12.27.48.png 但是切换过程感觉比较僵硬，所以增添一下切换的动画效果。

我们发现路由中，子路由只有一个组件意味着，如果要做动画的话图中的主题部分以及下面的下一页等按钮会一起动，显得很不自然。

截屏2022-10-11 12.30.54.png

对于现有代码进行重构，在路由中使用Vue-router的多重routerview，

截屏2022-10-11 12.52.11.png 把组件进行细分。

截屏2022-10-11 12.54.13.png 给RouterView一个name就可以精准渲染每个组件了。

Vue中添加动画需要引入Transition，并且按照文档来写css

<RouterView name="main">
    {({ Component: X, route: R }: { Component: VNode, route: RouteLocationNormalizedLoaded }) =>
        <Transition enterFromClass={s.slide_fade_enter_from} enterActiveClass={s.slide_fade_enter_active}
                    leaveToClass={s.slide_fade_leave_to} leaveActiveClass={s.slide_fade_leave_active}>
            {X}
        </Transition>
    }
</RouterView>

slide_fade_enter_active,
.slide_fade_leave_active {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease-out;
}

.slide_fade_enter_from {
  transform: translateX(100vw);
}
.slide_fade_leave_to {
  transform: translateX(-100vw);