CSS显示绝对在假设备框架后面

Question

所以，我正在模拟设备框架中的 pin 屏幕。 See CodeSandbox here.我想让这个pin screen向上过渡然后消失，问题是现在它只是向上，但没有在设备框架后面。

我可以通过让 pin 屏幕一直到屏幕边缘来解决这个问题，但是向上滑动时动画仍然会被破坏。有没有其他方法可以达到类似的效果？

Answer 1

此时屏幕正在从顶部过渡到 -100%。它实际上位于“设备”的前面——它需要覆盖设备的屏幕——但它需要看起来好像被设备的屏幕包含。

一种方法是停止转换顶部位置 - 将其保留在设备屏幕顶部的位置 - 并将其高度转换为 0。这样我们就不必担心它是否正在显示在设备后面（特别难以实现，因为设备有圆角）。