vue transition 頁面跳轉會出現抖動現象


試了很多中方法,最終找到了一個可用的方法

廢話不多講,實現一般的過渡動畫實現以下代碼就可以了。

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  height: 100%;
  will-change: transform;
  transition: all 500ms;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

但是我在做項目過程中發現頁面高度不一致的時候,頁面會先抖動一下,在瀏覽器中這個問題是不存在的,只有在手機中才存在這個問題。然后經過一番百度我加入了下面代碼就解決了。

.router-view {
  width: 100%;
  height:100%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

但是我經過測試,只需要加入overflow-x: hidden;這一行代碼就可以,我感覺是頁面高度不一致導致的問題,至於為什么加入這個代碼生效至今沒有弄懂。先記錄一下。

原博:https://blog.csdn.net/qq_25610161/article/details/81940863


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM