gpt4 book ai didi

javascript - CSS3 过渡 : Expand fixed footer or fixed header to maximum size without overlaying Header or footer

转载 作者:太空宇宙 更新时间:2023-11-04 14:20:28 25 4
gpt4 key购买 nike

我正在开发一个 html5 应用程序,其中有一个固定的页眉和一个固定的页脚。

当我点击页脚时,它应该向上滑动,直到它与页眉相距 10 像素。

标题也应该发生同样的事情。

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

默认布局的 CSS 很简单:我只使用顶部和底部的绝对定位。

.header, .footer {
min-height:25px;
background:grey;
position:absolute;
left:0;
z-index:5;
/** transition **/
transition: all 1s;
}

.header {
top:0;
background:red;
}

.footer {
bottom:0;
background:yellow;
}
.header.max {
bottom:35px;
}
.footer.max {
top:35px;
}

不,它涉及到动画部分。 我不想使用 Javascript 动画!只有 CSS!如果您单击页眉或页脚,我只需将类 max 添加到元素中:

$(".header, .footer, .content").on("click", function () {
$(".max").removeClass("max");
$(this).addClass("max");
});

动画应该看起来像页脚从底部展开。

我创建了一个 JS-Fiddle .您可以看到,问题恰好出在页脚/页眉的顶部和底部位置。

有谁知道如何解决这个问题,让动画看起来像页脚从底部展开?

谢谢!

最佳答案

过渡元素需要设置高度才能使动画效果更流畅。在我的示例中,我将页眉和页脚动画设置为 300px,您需要使用 JS 将其更改为通过 window.height() 或 update class="max" 或类似的东西。

解决 10px 要求的一种方法是加载 get window.height() minus 10px 然后用最终结果更新 class="max"。

我在你的 CSS 中改变了什么:

.header, .footer {
min-height:25px;
background:grey;
position:absolute;
left:0;
z-index:5;
/** transition **/
transition:height 2s;
-webkit-transition:height 2s; /* Safari */
}

.header.max {
height:300px;
}
.footer.max {
height:300px;
}

fiddle

http://jsfiddle.net/JSED5/3/

关于javascript - CSS3 过渡 : Expand fixed footer or fixed header to maximum size without overlaying Header or footer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19979820/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com