CSS Transitions Jumpy Animation

Question

Current Situation Preview

我试图让页面过渡变淡，正如视频所示，它并没有那么好用。我怀疑的是，当我为转换设置动画时，第二页会添加其填充/边距并与第一页合并，然后将其向下推。 我怎么能防止这种情况？如何将页面保持在其位置并实现平滑的淡入淡出过渡？

CSS过渡：

.fade {
    &-enter,
    &-exit {
        transition: opacity 300ms linear;
    }
    &-enter {
        opacity: 0;
        &-active {
            opacity: 1;
        }
    }
    &-exit {
        opacity: 1;
        &-active {
            opacity: 0;
        }
    }
}

对于JavaScript，我使用完全相同的React Router模型示例。 Animating Transitions.基本上，另一个元素被添加到DOM中，并在前一个元素淡出时淡入，最终离开DOM。