鍍金池/ 問(wèn)答/網(wǎng)絡(luò)安全  HTML/ vue-router 頁(yè)面加轉(zhuǎn)場(chǎng)動(dòng)畫 路由消失問(wèn)題

vue-router 頁(yè)面加轉(zhuǎn)場(chǎng)動(dòng)畫 路由消失問(wèn)題

切換路由加的動(dòng)畫
app.vue中的代碼

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

就是在右側(cè)像左側(cè)滑動(dòng)這樣子 結(jié)果 動(dòng)畫滑動(dòng)時(shí)路由消失是怎么回事呢
router-view加的定位樣式 也是不起作用 z-index那個(gè)也試了也不行

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

路由切換卡高85px

回答
編輯回答
安于心

動(dòng)畫類寫錯(cuò)了

 .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%);
  }
2017年2月24日 09:03
編輯回答
愚念

問(wèn)題已解決 meta標(biāo)簽沒(méi)加入 maximum-scale=1.0, minimum-scale=1.0, user-scalable=no 跟最小縮放minimum-scale=1.0這個(gè)有關(guān)

2017年1月13日 02:56