2-11-2 列表到详情页的动画切换

一、设置动画

//views/Movie/detail.vue
<template>
  <div id="detailContainer" class="slide-enter-active">
  </div>
</template>
<style scoped>
  .slide-enter-active{
    animation:.3s slideMove;
}
@keyframes slideMove {
    0%{
        transform: translateX(100%)
    }
    100%{
        transform: translateX(0%)
    }
}
</style>

这样从列表切换到详情页的时候就会触发一个动画。

二、设置默认路由

这样从列表切换到详情页的时候就会触发一个动画,但会存在一片空白,这样可以设置一个默认路由

{
            path:'detail/:id',
            components:{
                default:()=>import("@/components/InTheaters"),
                detail:()=>import('@/views/Movie/detail')
            },
            props:{
                detail:true
            }
}