背景颜色改变它的高度 onload答案

【问题标题】：Background color changing it's height onload背景颜色改变它的高度 onload
【发布时间】：2018-02-11 06:56:23
【问题描述】：

从现在开始我已经阅读了几个小时，即使提出正确的问题，我也可能遇到问题。我想要实现的是：在 10 秒内将主页背景高度从 0 更改为 100%，因此 1 秒后背景颜色为 10% 页面高度，2 秒后为 20% 页面高度等等。它应该在页面加载后开始改变。它可以是 jquery、css 或一些外部库，只是希望它能够工作。

【问题讨论】：

这可以通过动画线性渐变来实现。 Stack Overflow 上有一个答案：stackoverflow.com/questions/20751937/…

标签： javascript jquery html css css-transitions

【解决方案1】：

这样的？

body {
  width: 100vw;
  height: 100vh;
  position: relative;
  &::before {
    content: "";
    display: block;
    position: fixed;
    width: 100%;
    background: red;
    height: 0;
    z-index: 0;
    animation-fill-mode: forwards;
    animation-name: expand;
    animation-duration: 10s;
  }
}

@keyframes expand {
    from { height: 0; }
    to { height: 100%; }
}

所以基本上，你在你的内容下面添加另一个层，它会在 10 秒内动画到页面的高度（动画持续时间）

工作 JSFiddle：https://jsfiddle.net/y4kpcmjc/2/

【讨论】：

谢谢你，你救了我:) 你能告诉我如何让动画结束后颜色保持不变吗？因为现在它正在消失
当然，只需添加：animation-fill-mode: forwards;或者您可以使用 1-liner：动画：向前扩展 10 秒；我会更新答案:)

【解决方案2】：

来自官方jquery docs

.animate() 方法允许我们在任何数字 CSS 属性上创建动画效果。唯一需要的参数是 CSS 属性的普通对象。这个对象类似于可以发送到 .css() 方法的对象，只是属性的范围更受限制。

这是一个例子

<img id="image" src="..." />
...
<script>
$(document).ready(function() {
    $('#image').css('height', '0');
    $('#image').animate({
        height: "100%"
    }, 10000, function() {
       //Finished loading
    });

})
</script>

【讨论】：