Pas d'animation about magnificpopup

[franck-paul]

Bonjour,

Pour ça il faudrait modifier le plugin pour qu'il puisse le permettre ou a minima rajouter les CSS de transition correspondantes dans la feuille de style du thème.

[Pedrofsky]

J'ai ajouté ce qui suit au fichier style.css de mon thème mais pas de changement, sans doute la modification du plugin est-elle obligatoire ?

/* overlay at start */
.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;

  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

[Pedrofsky]

Bonjour Franck,
J'ai trouvé la solution :-)
C'est qu'il faut modifier public.js avec les instructions ci-dessous :

// Initialize popup as usual
$('.popup-link').magnificPopup({
  // Delay in milliseconds before popup is removed
  removalDelay: 300,

  // Class that is added to popup wrapper and background
  // make it unique to apply your CSS animations just to this exact popup
  mainClass: 'mfp-fade'
});

[franck-paul]

Je vais rouvrir ce ticket pour voir comment intégrer ça dans une future version.