Css 跳跃动画

正如视频显示的那样，我正在尝试进行页面渐变，但效果并不理想。我的怀疑是，当我为过渡设置动画时，第二页添加了填充/边距，并与第一页合并，从而将其向下推。 我怎样才能防止呢？如何使页面保持在其位置并实现平滑淡入过渡

CSS转换：

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

---

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

请提供您的

css

和（如果有）

js

代码。@hts谢谢您的提醒，添加了信息。