une simple histoire de transition en CSS

Par bahcmoa, il y a 9 ans

Les bases HTML/CSS

Bonjour,
décidément, CSS n'est pas mon ami ... voilà j'aimerai faire apparaître un cadre en modal sur fond plus foncé, ça pas de soucis ... mais j'aimerais qu'il apparaisse progressivement sur 1 ou 2 secondes ... et là je bute sur les transitions ... voici mon code ... si quelqu'un saurait me dire comment faire pour jouer avec la transition ...

merci

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>test Modal</title> <!-- <link rel="stylesheet" href="css/semantic-ui/semantic.css"> --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css"> <style> .p-modal{ display:none; position: fixed; top:0; width: 100% ; height: 100%; z-index: 999 ; text-align: center; background: rgba(0,0,0,0.8); /**** c'est sur la transition que je bute *********************/ opacity: 0; transition: opacity 3s linear; /*****************************************************/ } .p-modal.affichee { display: block!important; /**** c'est sur la transition que je bute *********************/ opacity: 1; transition: opacity 3s linear; /*****************************************************/ } .hidden{ display:none!important; } .i-b{ display: inline-block!important; } .valign{ display: inline-block; height: 100%; width: 0px; border: solid 0px yellow; vertical-align: middle ;} </style> </head> <body> <div class="ui main container"> <h2>test modal</h2> <button class="ui button" onClick="switchModal()">switchModal </button> </div> <div class="p-modal"> <div class="valign"></div> <div class="ui container segment i-b"> un text quelconque pour le modal<br><br> <button class="ui positive button" onclick="switchModal()">Cliquez pour fermer le Modal</button> </div> </div> <script> function switchModal(){ document.querySelector('.p-modal').classList.toggle('affichee') } </script> </body> </html>

2 réponses

bahcmoa, il y a 9 ans

merci pour l'info Kenor :) .... vais étudier ça :-)

Kenor, il y a 9 ans

display:none et transition ne font pas bon ménage.
Quand un bloc est en display:none; il n'existe pas, par conséquent, il n'est pas possible de faire une transition sur un élément encore inexistant (du point de vue CSS).

Du coup, il faut ruser ... Selon le besoin, ça va dépendre, du genre mettre le height à 0 pour ne pas être visible, puis le mettre en auto, et gérer l'opacité etc. Bref, bidouiller pour que l'élément ne soit pas en display:none sans pour autant être visible.
Par simplicité, à ta place, je le ferai en JS (étant donné que le modal a nécessairement besoin du JS pour fonctionner).