Discussion :

[d3LTa7]

Hello
J'essaye de faire une animation css avec un bouton toggle qui agrandi/rétrécis une div en grid-area en ajoutant ou enlevant une ligne.

Voici un code pen :

https://codepen.io/OliveSept/pen/xxjKmvQ

1. Je ne sais pas pourquoi l'insertion des éléments dans codepen (le résumé, le bouton et le texte) ne sont pas à leur place dans la grille, alors que chez moi tout est à sa place !! le code est identique à part le contenu... Mais bon ca c'est un détail mais c'est un peu embêtant :/
2. La transition entre les 2 partie est un peu brutal et je n'arrive pas a faire une transition entre les 2. j'ai essayé en ajoutant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.sgl_elem{
transition: grid-template-rows 0.5s, grid-template-areas 0.5s;
}

Mais ça ne marche pas :/
3.De plus j'ai remarqué que l'action n'était pas que le bouton mais sur toute la div général

merci de vos lumières

[NoSmoking]

Bonjour,
les propriétés grid-template-rows et grid-template-areas ne sont pas candidates aux transitions.

• Quelles sont les propriétés CSS qui peuvent être animées ?
• Liste des propriétés CSS animées