Transition et opacité pour un fond d'une fenêtre modal

intelligid
Les bases HTML/CSS

Bonjour,

Ce que je fais

Ben, un petit codepen pour mieux comprendre:

http://codepen.io/anon/pen/dGLmmJ/

Ce que je veux

Je veux que lorsqu'on clique sur le bouton, il y a un fond qui s'affiche progressivement.

Ce que j'obtiens

La transition ne se fait pas. Le fond apparait directement.

Merci pour votre aide future ;)

3 réponses

mxmaxime
Réponse acceptée

Salut,
En effet ta méthode @Blinkers s'avère beaucoup trop lourde, de nos jours on préfère largement les animations CSS déclenchés par du JS.
Ton animation ne fonctionne pas parce que ton élément de base est en diaplay none puis tu le passes en display block. Il faut que ton élément soit déjà en display block, ne modifie pas le display ;)
Tiens : http://codepen.io/anon/pen/EPzYNr
J'ai modifié ton positionnement qui pourrait poser problème dans certains cas.
En espérant t'avoir aidé l'ami!

Blinkers

Hello,

Tu t'embète pour rien :
CSS :

.gallery-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  outline: 0;
  background: black;
}

JS :

$(".gallery-item").on("click", function() {
  $(".gallery-overlay").fadeIn("fast");
});
intelligid
Auteur

Le problème de ta solution est que les animations jquery sont asynchrones. Hors je vais devoir gérer plusieurs animations à la fois. De plus, les animations JS sont ,pour ma part, plus lourdes que les animations CSS.