动画平滑的CSS网格列更改

我正在使用CSS网格布局来定位网站上的各个部分。我使用grid-column: x/x;和grid-row x/x;在页面上设置它们的位置和大小。它工作得很好。动画平滑的CSS网格列更改

现在我试图在屏幕尺寸发生变化时发生两个网格列修复之间的平滑过渡。这个变化是从grid-column: 3/9;到grid-column: 2/10;，这意味着div在每一边都增长了1fr。目前它只是“平息”到位，但我希望在两者之间顺利过渡。

有人有任何想法如何解决它？

这里是我的CSS文件中的片段：

nav { 
    background-color: $company-blue; 
    border   : 3px solid $company-yellow; 
    opacity   : 0.8; 
    grid-column  : 3/9; 
    grid-row  : 3/4; 
    ... 
    @media screen and (max-width: 1378px) { 
    grid-column : 2/10; 
    } 
}

来源

2017-08-05 Mikey Katholnig

transition？但如果它有效，它将会是越野车。在这里我相信CSS不会帮助你。 –

您能否将所有相关的HTML和CSS添加到您的问题中？ –

我不认为目前主流浏览器支持Grid的转换。 https://stackoverflow.com/q/43911880/3597276 –

没有对grid-column或grid-row性能CSS转换。为了有任何，

grid-column: 2.5/9.5;

...从渲染的角度来看必须有意义。
想象一下，你是编码浏览器的人。你将如何渲染一个grid-column:2.5/9.5;？

期待CSS转换在这里工作就像期待它们在内容在列之间移动时在CSS列中工作。

需要动画与CSS网格？ JavaScript是你唯一的朋友。

这是我怎么会去一下吧：

每个网格元素的内容克隆到绝对定位的容器。
淡出实际内容的，使用不透明
新grid-columns属性应用于电网
动画克隆元素转化为现实的新位置
淡出克隆的内容并在
真正一回删除克隆。

使这项工作跨浏览器/跨设备可能会造成一些问题，但它是可行的。

注：你可能需要考虑增加网格元素和网格元素，内容之间的包装层，以帮助两两件事：

确保每个网格元素只有一个子（为了简化获得宽度/高度计算过渡）
简化追踪每一个元素，所以你知道什么过渡哪里

来源

2017-08-05 21:36:35

嗨安德烈，我有这样的感觉。 JS然后:)谢谢你让我知道。 –

我曾与一个非常贫穷的黑客欺骗它。但它有效...

nav { 
    background-color: $company-blue; 
    border   : 3px solid $company-yellow; 
    opacity   : 0.8; 
    grid-column  : 3/9; 
    grid-row  : 3/4; 
    @media screen and (max-width: 1378px) { 
     position : fixed; 
     z-index : 9999; 
     width  : 60%; 
     margin  : 155px 20% 0; 
     animation : grow-fixed 1s ease; 
     @keyframes grow-fixed { 
      0% { 
       width : 60%; 
       margin: 155px 20% 0; 
      } 

      100% { 
       width : 80%; 
       margin: 155px 10% 0; 
      } 
     } 
     width  : 80%; 
     margin  : 155px 10% 0; 
     grid-column: 2/10; 
     grid-row : 3/4; 
    } 
    @media screen and (min-width: 1378px) { 
     position : fixed; 
     z-index : 9999; 
     width  : 80%; 
     margin  : 155px 10% 0; 
     animation : shrink-fixed 1s ease; 
     @keyframes shrink-fixed { 
      0% { 
       width : 80%; 
       margin: 155px 10% 0; 
      } 

      100% { 
       width : 60%; 
       margin: 155px 20% 0; 
      } 
     } 
     width  : 60%; 
     margin  : 155px 20% 0; 
     grid-column: 3/9; 
     grid-row : 3/4; 
    }

来源

2017-08-06 08:42:33

动画平滑的CSS网格列更改

回答

相关问题