Ajouter deux évènements `concealed` et `disclosed` pour les objets `Disclosure`

[christophehenry]

Si votre suggestion concerne un composant existant, merci de décrire le problème rencontré de façon claire et concise Les objets Disclosure (modale, accordéon, etc.) ont deux éènements dsfr.conceal et dsfr.disclose qui indiquent que l'élément va apparaître ou disparaître mais le CSS a une transition qui empêche de savoir quand l'élément est entièrement visible ou invisible. Les objets Disclosure devraient lancer un évènement dsfr.concealed et dsfr.disclosed x secondes après l'envoi de l'évènement dsfr.conceal ou dsfr.disclose pour synchroniser l'affichage.

Cependant, la règle CSS peut être surchargée. Y a-t-il moyen de déterminer en JS le temps d'affichage ou de disparition ?

[keryanS]

Bonjour,

Est-ce que l'événement natif "transitionend" pourrait faire l'affaire ?

dsfr(temp1).collapse.node.addEventListener("transitionend", () => {
    alert('fin anim')
})

Keryan, pour l'équipe DSFR

[christophehenry]

Hmm… Je suis pas sûr… transitionend est envoyé des qu'une transition se termine mais comment savoir si c'est bien celle qui cache la modale ?

Quoi qu'il en soit, ça pourrait être pratique de le wrap dans un évènement spécifique.

[keryanS]

Car temp1 correspond à l'élément du DOM qui possède le collapse, il n'a qu'une transition sur cet élément.

En testant dans l'inspecteur : Sur la modal -> Click droit -> store as variable -> dans la console :

temp1.addEventListener("transitionend", () => {
    alert('fin anim')
})

Cela semble fonctionner correctement.

Néanmoins, je suis d'accord qu'il pourrait être intéressant d'avoir l'événement directement dans l'api dsfr. Je le note pour les prochaines versions.