- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在开发一个 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;
}
关于javascript - CSS3 过渡 : Expand fixed footer or fixed header to maximum size without overlaying Header or footer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19979820/
我有一个简单的 Card 组件,是从material-ui 的网站复制的。 我正在尝试在我的代码中实现它。当我单击 CardHeader 时,它不会展开。 这是我的组件: import React,
我已经使用延迟加载实现了一棵树。第一级节点是在树创建时创建的,其中只有当用户展开任何特定节点时才会创建子节点。 数据来自数据库,我们向数据库发出查询以填充子节点。实现了 TreeExpansionLi
假设我有 3 个向量(仅作为示例)。现在我想获取这 3 个所有可能组合的随机样本。通常,我会这样做: x <- 1:3 y <- 10:12 z <- 15:18 N <- length(x) * l
如果我使用 dabbrev-expand为了扩展,Emacs 搜索当前缓冲区,然后搜索其他具有相同模式的缓冲区。这是由 dabbrev-friend-buffer-function 处理的默认设置为
我想像这样切片主窗口 我的布局代码如下: QGridLayout *gLayout = new QGridLayout (); viewWidget->setStyleSheet("backgroun
我在 Android Studio Canary 1 上尝试 Jetpack Compose 并添加了 Column可组合到 ui。 Column有一个名为 modifier 的属性我们可以在其中传递
我正在努力让我们的 Accordion 可以使用 aria-expanded 等 aria 标签来访问。当单击 Accordion 触发器标题或按下键盘上的“返回”按钮时,我正确地更改了 aria-e
根据 http://doc.qt.io/qt-5/qsizepolicy.html#Policy-enum ,设置小部件的大小策略具有以下效果: The sizeHint() is a sensibl
我将使用Live Actitions显示实时数据,并在一个应用程序中添加对Dynamic Island的支持,该应用程序具有现有的小部件扩展。然而,我也不能把它造出来。当我收到错误信息时。和。即使我提
我有一个设置,如下所示: //With dynamic content here. 我正在运行一个脚本,该脚本将 #nav 的大小调整为浏览器窗口的高度大小。但有时我的
我正在使用jquery checkboxtree plugin它效果很好,并且上面的链接中有很好的文档和示例。我现在遇到一种情况,我想以编程方式检查节点。使用以下语法支持此操作: $('#tabs-
我正在尝试以下实验: 我有两个QpushButtons,比如PushA 和PushB。现在 PushA 在 QHBoxLayout 中,PushB 也在它自己的 QHBoxLayout 中。这两个水平
我目前有一个 OData V4 服务,它具有以下模型。 “类别”——“代码” 对于每个类别,可以有许多代码。 我需要 $expand the Codes, $filter where Active =
我的目的是创建一个带有 QVBoxLayout 的可滚动控件,上面有各种控件(比如按钮)。该控件放在 *.ui 窗体上。在该控件的构造函数中,我编写了以下代码: MyScrollArea::M
你们如何解决以下 Flutter 布局? 我有一个屏幕,我必须在其中显示,如图所示:一个 Logo + 3 个 TextFormFields + 2 个按钮 + 一个容器。 问题: 我需要将所有小部件
我使用最新版本的 mvvm light 工具包,但是我不清楚如何将 EventToCommand 用于事件 TreeViewItem.Expanded。 这很有效......我做错了什么?
我是 LINQ 的新手。 我有以下查询,我不知道它代表什么。 var query = (from p in data.First
这里有一个小问题。我有一个表,当我想单击运行时,该表应该展开,而且同一行中有一个展开按钮,它也应该展开一个 div。 问题:当我单击该行时,一切正常,div 将滑入。当我单击按钮(位于表行中)时,会产
图片:
我的应用程序中有 Expander 设置 FlowDirection 正常工作,但标题文本显示在水平方向。我想显示标题文本垂直绘制。 最佳答案 使用 sl 工具包中的 LayoutTransforme
我是一名优秀的程序员,十分优秀!