为平滑的CSS网格-列动画设置动画 [英] animating a smooth css grid-column change

问题描述

我正在使用CSS网格布局在网站上放置各个部分。我使用 grid-column：x / x; 和 grid-row x / x; 设置它们的位置和大小在页面上。

I am using CSS grid layout to position various parts on a website. I use grid-column: x / x; and grid-row x / x; to set their position and size on the page. It's working really well.

现在，我正在尝试为两个网格列修复程序之间的平滑过渡设置动画，该过渡在屏幕尺寸改变时发生。更改从 grid-column：3/9; 更改为 grid-column：2/10; div每边增加 1fr 。目前，它只是 ping到位，但是我希望两者之间能有一个平稳的过渡。

Now I am trying to animate a smooth transition between two grid-column fixes which happens when the screen size changes. The change is from grid-column: 3 / 9; to grid-column: 2 / 10; which means the div grows on either side by 1fr each. At the moment it just "pings" into place but I would like to have a smooth transition between the two.

任何人都知道如何解决它吗？

Anybody got any ideas how to tackle it?

这是我的CSS文件中的摘录：

Here is the snippet from my CSS file:

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;
    }
}

推荐答案

有是 grid-column 或 grid-row 属性的CSS过渡。

There are no CSS transitions for grid-column or grid-row properties. In order to have any,

grid-column: 2.5 / 9.5;

...从渲染角度来看必须有意义。

假设您是编码浏览器的人。您将如何呈现 grid-column：2.5 / 9.5; ？

...would have to make sense from a rendering point of view.
Imagine you're the guy coding the browser. How would you render a grid-column:2.5 / 9.5;?

期望CSS过渡在这里起作用就像当内容在列之间移动时期望它们在CSS列中起作用。

Expecting CSS transitions to work here is like expecting them to work in CSS columns when content moves between columns.

需要使用CSS Grid动画吗？ JavaScript是您唯一的朋友。

Need animations with CSS Grid? JavaScript is your only friend.

这是我的处理方式：

1. 克隆每个内容


2. 使用不透明度淡出真实内容


3. 应用新的 grid-columns code>属性归入网格


4. 将克隆的元素动画化为真实元素的新位置


5. 淡出克隆的内容并返回真实的内容


6. 删除克隆。

1. clone contents of each grid element into absolutely positioned containers.
2. fade real content out, using opacity
3. apply the new grid-columns property to the grid
4. animate cloned elements into new positions of real ones
5. fade cloned content out and the real one back in
6. delete clones.

跨浏览器/跨设备进行这项工作可能会带来一些问题，但这是可行的。

Making this work cross-browser/cross-device might pose a few problems, but it's doable.

注意：：您可能要考虑在网格元素的内容和网格元素之间添加一层包装，以帮助完成两件事：

Note: You might want to consider adding a layer of wrappers between the contents of your grid elements and the grid elements, to help with two things:

1. 确保每个网格元素只有一个子对象（以简化获取宽度/高度以计算过渡）


2. 简化跟踪每个元素，以便您知道要在哪里过渡

这篇关于为平滑的CSS网格-列动画设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！