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，动画将变得“滞后”。您可以做的就是将包装网格放入另一个包装网格中。然后，您不会使用实际行来为该网格设置动画，而是使用相同的方法为第一个网格的子级或实际网格的父级设置动画。

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

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial