使用 CSS 使方框充满整个屏幕而不会突然跳动

Question

我有以下代码，它只是从容器顶部绘制一个黄色框 80vh：

<!DOCTYPE html>
<html>
  <head>
<style>
:root {
  --t: 1s;
}
body {
  padding:0;
  margin:0;
}
.contain {
  position:relative;
  height:400vh;
  background:blue;
}
.box {
  position:absolute;
  top:80vh;
  height:400px;
  width:50vw;
  left:0;
  background:yellow;
  transition: position 0s linear var(--t),
    background var(--t) ease 0s,
    top var(--t) ease 0s,
    height var(--t) ease 0s,
    width var(--t) ease 0s;
}
input {
  display:none;
}
input:checked ~ .contain .box {
  position:fixed;
  background: pink;
  top:0;
  height:100vh;
  width:100vw;
}
</style>
  </head>
  <body>
    <input id="checkbox" type="checkbox" />
    <div class="contain">
    <label class="box" for="checkbox"></label>
    </div>
  </body>
</html>

我想要一个 CSS 唯一的解决方案，如果我点击黄色框，它将 平滑地 增长以填满整个屏幕而没有任何 abrupt跳跃效果。如果您的浏览器滚动位置为 0px（即在页面顶部），我上面的解决方案有效。但是当你向下滚动说 100vh 时，点击黄色框会导致它在增长之前向下跳一点，我在这个 30 秒的视频中澄清了这一点：https://www.youtube.com/watch?v=2hVNg-OPZ6Q .

任何人都可以建议我如何使用 CSS 和 HTML 来实现我的黄色框增长并填满整个屏幕的平滑过渡吗？

Answer 1

突然跳跃效果背后的原因是在input:checked中你有固定位置将其更改为绝对。

position:absolute;

固定位置使元素的位置和尺寸相对于它的包含块，即包含 class，而在绝对位置中，它相对于通常是视口的初始包含块：浏览器 window 或论文的页面框。

Answer 2

恐怕 css-only 解决方案无法 100% 实现您想要实现的目标。

正如另一个答案所述，主要问题来自于您要从 absolute 固定 position 的事实。问题是 position 属性不可设置动画，这意味着无论您在 transition 属性中应用多少秒，它都不会产生任何效果。

最接近的 css-only 解决方案是：

/* Some code  */

input:checked~.contain .box {
    background: pink;
    top: 0;
    height: 100%;
    width: 100%;
}

/* Some code  */

盒子将通过动画填充整个视口，但填充整个高度的动画时间略有不同。此外动画将从初始的黄色框位置开始，而不是从屏幕底部开始。

如果您想按照您在 post 中描述的方式进行动画处理，则必须使用一些 javascript。

使用 CSS 使方框充满整个屏幕而不会突然跳动

Use CSS to animate a box to fill a whole screen without any abrupt jumping

css

css-transitions