vue-router 页面加转场动画 路由消失问题

Question

切换路由加的动画
app.vue中的代码

.trans-enter{
  transform: translateX(100%);
}
.trans-enter-active{
  transition: 1s linear;
}
.trans-leave-active{
  transform: translateX(-100%);
  transition: 1s linear;
}

就是在右侧像左侧滑动这样子 结果 动画滑动时路由消失是怎么回事呢
router-view加的定位样式 也是不起作用 z-index那个也试了也不行

 position: absolute;
  top: 0;
  left:0;
  bottom: .85rem;

路由切换卡高85px

Answer 1

问题已解决 meta标签没加入 maximum-scale=1.0, minimum-scale=1.0, user-scalable=no 跟最小缩放minimum-scale=1.0这个有关

Answer 2

动画类写错了

 .pg-enter{
    transform: translate(-100%);
  }
  .pg-enter-active,
  .pg-leave-active{
    position: absolute;
    top: 0;
    width: 100%;
    transition: all .5s;
  }
  .pg-leave-to{
    transform: translate(100%);
  }