vue 過渡動畫抖動問題處理
廢話不多講,實現一般的過渡動畫實現以下程式碼就可以了。
.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;