vue实现路由跳转--动画滑出页面之popup （组件跳转）

在父组件 使用 。

<transition-group name="slider">    <offlineManagement class="popup_right" v-if="$route.query.popup=== 'offlineManagement'" key="offlineManagement"></offlineManagement> </transition-group>

import offlineManagement from '@/views/OfflineManagement/staffOfflineManagement';

注册组件之后 。使用路由跳转 。跳转是当前自己页面。只是加上参数名是popup ，值需要和组件上的v-if 和key 的值一致。

this.$router.push({path:this.$route.path, query: {popup:'offlineManagement'}});

注意。类popup_right 需要有动画样式

.popup_right{
    &.slider-enter-active, &.slider-leave-active {
      transition: all 0.2s linear;
      transform: translate3d(0,0,0);
    }
    &.slider-enter, &.slider-leave-to{
      transform: translate3d(100%,0,0);
    }
}

另外一个要点。因为组件和父组件是在一个视窗页面。所以组件需要有定位才行

使用 position: fixed; // 或是 absolute
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
z-index: 7;