Wie animiere ich die Erweiterung des Rasterlayouts?

Question

Ich möchte wissen, wie man die Erweiterung eines Rasterlayouts animiert. Wie Sie im Code sehen können, habe ich 4 Divs. Zwei davon werden angezeigt, die anderen beiden werden nur angezeigt, wenn das Kontrollkästchen aktiviert ist. Wenn das Kontrollkästchen aktiviert ist, wird eine weitere Zeile mit div3 und div4 hinzugefügt. Wie animiere ich die Erweiterung? Es ist am besten, die Größe des Rasters klein zu halten. Ich möchte nicht, dass die Animation die (nicht vorhandenen) Ränder beeinflusst. Ich möchte dies auch ohne JavaScript tun. Ist es möglich?

P粉529581199 · Answer

解决方案非常简单。我将我的网格放入另一个网格中。然后我简单地使用 fr 作为调整主网格所在 div 上的行大小的方法。这导致了将网格行从 0fr 转换为 1fr 的可能性。就是这样。

.toggle {
    width: 100%;
}

.grid {
    display: grid;
    width: 20%;
    border: solid black 2px;
}

.div1 {
    grid-column: 1;
    grid-row: 1;
}

.div2 {
    grid-column: 2;
    grid-row: 1;
}

.wrapper {
    grid-column: 1 / 3;
    grid-row: 2;
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 200ms;
}

.div3 {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
}

.div4 {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
}

.toggle:checked ~ .grid > .wrapper {
    grid-template-rows: 1fr;
}




    
    
    
    Website


    
    
        Hello
        Hello2
        
            Hello3
            Hello4

此外，如果您的网格中有不同大小的不同行。例如，一个为 0.05fr，一个为 1fr，动画将变得“滞后”。您可以做的就是将包装网格放入另一个包装网格中。然后，您不会使用实际行来为该网格设置动画，而是使用相同的方法为第一个网格的子级或实际网格的父级设置动画。

这是一种奇怪的解决方法，但它是解决问题的一种方法，而无需重做太多。