使用CSS动画框以填充整个屏幕，而不会突然跳动

问题描述

我有以下代码，该代码从容器顶部绘制了一个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的解决方案，通过单击黄色框，它会平滑增长，以填满整个屏幕，而不会产生突然跳跃效果。如果您的浏览器滚动位置为0px（即页面顶部），则上述我的解决方案有效。但是当您向下滚动100vh时，单击黄色框会使它在增长之前向下跳一点，我在这30秒的视频中对此进行了澄清：https://www.youtube.com/watch?v=2hVNg-OPZ6Q。

有人可以建议我如何仅使用CSS和HTML来使我的黄色框平滑过渡，以使其生长并填充整个屏幕吗？

解决方法

仅使用css的解决方案，恐怕您要实现的目标并非100％可能。

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

最接近纯CSS的解决方案是：

/* Some code  */

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

/* Some code  */

该框将进行动画处理以填充整个视口，但是动画时间会略有不同，以填充整个高度。动画还将从初始的黄色框位置开始，而不是从屏幕底部开始。

如果要准确地动画化帖子中的描述方式，则必须使用一些JavaScript。

突然跳动效果的原因是输入：检查您是否已固定位置将其更改为绝对位置。

position:absolute;

固定位置使元素相对于其包含块（即包含类）的位置和尺寸，而从绝对角度而言，它相对于通常是视口的初始包含块：浏览器窗口或纸张的页面框。

css-transitions