Comment animer l'expansion de la disposition de la grille ?

Question

Je veux savoir comment animer l'expansion d'une disposition en grille. Comme vous pouvez le voir dans le code, j'ai 4 divs. Deux d'entre eux seront affichés et les deux autres ne seront affichés que lorsque la case est cochée. Lorsque la case est cochée, une autre ligne sera ajoutée contenant div3 et div4. Comment animer l’extension ? Il est préférable de garder la taille de la grille petite. Je ne veux pas que l'animation affecte les marges (inexistantes). Je veux aussi le faire sans JavaScript. Est-il possible?

P粉529581199 · Answer

La solution est très simple. J'ai mis ma grille dans une autre grille. Ensuite, j'ai simplement utilisé fr comme moyen de redimensionner les lignes du div où se trouve la grille principale. Cela se traduit par la possibilité de convertir des lignes de grille de 0fr à 1fr. C'est ça.

.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

Aussi, si vous avez différentes lignes de tailles différentes dans votre grille. Par exemple, une à 0,05fr et une à 1fr, l'animation deviendra "laggy". Ce que vous pouvez faire, c'est placer une grille wrapper dans une autre grille wrapper. Ensuite, au lieu d'utiliser la ligne réelle pour animer cette grille, vous utilisez la même méthode pour animer les enfants de la première grille ou le parent de la grille réelle.

C'est une solution de contournement étrange, mais c'est un moyen de résoudre le problème sans trop en refaire.