fix: 💄 Anime la fermeture des sous-menus

Concerne :
- DsfrLanguageSelector
- DsfrTranscription

Author: laruiss

src/components/DsfrLanguageSelector/DsfrLanguageSelector.vue

@@ -25,19 +25,28 @@ export default defineComponent({
   data () {
     return {
       expanded: false,
+      collapsing: false,
     }
   },
   computed: {
     collapseStyle () {
       const baseStyle = {
         '--collapse': `-${this.languages.length * 114}px`,
       }
-      if (this.expanded) {
+      if (this.expanded || this.collapsing) {
         baseStyle['--collapse-max-height'] = 'none'
       }
       return baseStyle
     },
   },
+  watch: {
+    expanded (isExpanded) {
+      if (!isExpanded) {
+        this.collapsing = true
+        setTimeout(() => { this.collapsing = false }, 300)
+      }
+    },
+  },
   methods: {
     selectLanguage (language) {
       this.expanded = false
@@ -67,7 +76,7 @@ export default defineComponent({
       <div
         :id="id"
         class="fr-collapse  fr-translate__menu  fr-menu"
-        :class="{'fr-collapse--expanded': expanded}"
+        :class="{ 'fr-collapse--expanded': expanded, 'fr-collapsing': collapsing }"
         :style="collapseStyle"
       >
         <ul class="fr-menu__list">
@@ -91,10 +100,3 @@ export default defineComponent({
 </template>
 
 <style src="@gouvfr/dsfr/dist/component/translate/translate.main.min.css" />
-
-<style scoped>
-.fr-menu {
-  position: relative;
-  top: -1rem;
-}
-</style>

src/components/DsfrTranscription/DsfrTranscription.stories.js

@@ -43,5 +43,5 @@ Transcription.args = {
   dark: false,
   title: 'Chats hiver',
   content: 'Des chatons jouant dans la neige',
-  collapseValue: '-114',
+  collapseValue: '-114px',
 }

src/components/DsfrTranscription/DsfrTranscription.vue

@@ -22,6 +22,7 @@ export default defineComponent({
     return {
       opened: false,
       expanded: false,
+      collapsing: false,
     }
   },
 
@@ -30,12 +31,20 @@ export default defineComponent({
       const baseStyle = {
         '--collapse': this.collapseValue,
       }
-      if (this.expanded) {
+      if (this.expanded || this.collapsing) {
         baseStyle['--collapse-max-height'] = 'none'
       }
       return baseStyle
     },
   },
+  watch: {
+    expanded (isExpanded) {
+      if (!isExpanded) {
+        this.collapsing = true
+        setTimeout(() => { this.collapsing = false }, 300)
+      }
+    },
+  },
 })
 </script>
 
@@ -52,7 +61,7 @@ export default defineComponent({
     <div
       id="fr-transcription__collapse-transcription-1354"
       class="fr-collapse"
-      :class="{ 'fr-collapse--expanded': expanded }"
+      :class="{ 'fr-collapse--expanded': expanded, 'fr-collapsing': collapsing }"
       :style="collapseStyle"
     >
       <dialog