CSS-Grid如何在动画期间强制行动态向上展开在高度悬停时?

时间:2018-05-01 11:35:58

标签: html css css-grid

问题:

我在使用HTML和CSS-Grid构建简单的SPA布局时遇到了一些好奇的Google Chrome默认行为。

当动画生成网格的各个行时,我要么动态生成内容(& items),要么在同一网格中的另一个元素上更改:hover上的现有元素高度,包含行会增长:

  • 向上 - 如果element:hover位于屏幕的下半部分(动态内容突出于视口顶部);
  • 向下 - 如果element:hover位于屏幕的上半部分(动态内容完全可见或向下伸出视口);。

!important上述内容仅适用于悬停在其上的element从文档中的原始位置取出并置于grid-area属性下的动态元素下方。在任何其他情况下,网格行总是向下扩展。

更新,编辑02.05.2017

正如Michael_B在评论部分指出的那样,好奇的浏览器行为是由Google Chrome功能引起的,称为滚动锚定。

  

Michael_B:在Chrome中,展开框的向上/向下方向由视口中的滚动位置控制,而不是布局本身。   基本上,它们将DOM元素绑定到当前滚动位置。此特定("锚点")元素在屏幕上的移动将决定对滚动位置的调整(如果有)。

您可以阅读所有相关信息here

重新定义的问题:

由于无法修改滚动锚定而不是使用overflow-anchor: none关闭滚动锚定,因此无法在"预期结果"中详细描述所需的行为。部分。

预期结果:

我想强制网格行中包含的任何元素垂直向上动画,无论元素的屏幕位置悬停在上面。换句话说,我希望网格行的高度动画从其自身的底部增长到页面的顶部,而不是从上到下,在所有情况下,但受结构和文档流程保留的限制。

完成研究:

我已经做了一些挖掘,似乎有很多解决相当类似的问题,但是关于阻止显示元素 none CSS-Grid

解决方案e。克,

以下是stackoverflow中的一些内容:

还来自外界:

研究摘要:

所有上述和许多其他在线可用的解决方案主要围绕将position:relative的CSS规则设置到父容器,以便为要激活的块元素,而不是声明position:absolutebottom:0 在动画的块元素上。

在这种情况下,由于块元素现在绝对位于其容器的底部,因此它被迫在所需方向上进行动画处理,因为除了垂直向上增加之外,它无处可扩展。

为什么CSS网格不起作用?

如果标准文档流position:absolute元素相对于其第一个定位(非静态,例如,position:relative)祖先定位,则将其从正常文档流中取出。网格的情况也是如此,但具体的是网格中的普通元素默认水平和垂直拉伸以适合整个声明的网格区域。相反,定位元件收缩以适应并使其尺寸适应内容物,或者更糟糕的是根本不占据垂直空间。你可以设置grid-auto-rows: minmax()属性来试图掩盖它。但是,再次,它是默认行为。它也没有解决问题,因为在网格中有其他元素会被定位的元素溢出。

您当然可以尝试在网格行中放置一个块元素,并将position: absolute放到position: ed relative网格行并设置块元素bottom:0,起初看起来效果很好。但是,与您注意到的那样,块元素将在之前的文档元素上增长。如果整个布局结构是基于块元素构建的话,它实际上会表现出相同的行为,这就是为什么我首先不喜欢这个想法。这也是我在本节第一句中陈述的明显原因。

建议的解决方案

我相信,我已经意识到如何从概念上解决这个问题,但我并不需要技术技能。在我看来,正确的方法是在element:hover位于屏幕上方时尝试覆盖初始浏览器行为,并使其行动,因为它将在另一半上,因为需要结果已经在浏览器中内置,但在不受欢迎的情况下触发。我对其他命题的态度开放。

更新,编辑02.05.2017

由于技术限制,解决方案无效。



#container {
  display: grid;
  grid-auto-rows: minmax(300px, auto) 100vh;
  align-content: center;
  color: white;
  font-size: 24px;
}

#fisrtelement {
  display: grid;
  background-color: orange;
}

#secondelement {
  background-color: greenyellow;
}

.expandable {
  height: 100px;
  background-color: forestgreen;
}

.content:hover~.expandable {
  height: 150px;
}

.content {
  min-height: 120px;
}

#item1 {
  grid-area: 1/1;
  background-color: forestgreen;
}

#item2 {
  grid-area: 2/2;
}

#item3 {
  grid-area: 3/3;
  background-color: forestgreen;
}

<div id="container">

  <div id="fisrtelement">
    <div id="item1" class="content">Content</div>
    <div id="item3" class="content">Content</div>
    <div id="item2" class="expandable">Expandable area (on content:hover)</div>

  </div>
  <div id="secondelement">

  </div>
</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案