Javascript 在SPA中使用绝对位置进行页面转换的替代方法

我正在构建一个单页应用程序，并在视图（页面）上使用绝对位置，以便在导航到不同页面时实现页面转换。我正在使用css动画，我所追求的效果是一页向右滑出，同时下一页从左滑入

虽然这样做很好，但问题是大多数移动浏览器将绝对定位元素呈现为不同的布局，这对性能有负面影响

我想知道是否有一种替代绝对定位的方法来达到我上面描述的效果。我曾尝试使用display:flex和float:left，但无法达到相同的效果

检查我正在做的一个非常基本的示例：

@-webkit-keyframes moveFromLeft {
    from { -webkit-transform: translateX(-100%); }
}
@keyframes moveFromLeft {
    from { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}

@-webkit-keyframes moveToRight { 
    from { }
    to { -webkit-transform: translateX(100%); }
}
@keyframes moveToRight { 
    from { }
    to { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
.moveFromLeft {
    -webkit-animation: moveFromLeft .7s ease both;
    animation: moveFromLeft .7s ease both;
}

.moveToRight {
    -webkit-animation: moveToRight .7s ease both;
    animation: moveToRight .7s ease both;
}

html,
body,
.page-container {
    height: 100%;
    position: relative;
    width: 100%;
}

.page {
    height: 400px;
    color: #FFF;
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    display: none;
}
.page.active {
    display: block;
    left: 0;
}
.page1 {
    background: #000;
}
.page2 {
    background: #0F0;
} 

---

相关：刚刚添加

溢出：隐藏

非常适合身体，mobile似乎很喜欢它：问题不在于水平滚动。在我的应用程序中，我仍然隐藏退出页面。我的问题是关于页面转换效果的绝对位置的替代方法。