fix(NcPopover): properly wait for css animation completion

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

Author: skjnldsv

src/components/NcPopover/NcPopover.vue

@@ -174,7 +174,6 @@ import NcPopoverTriggerProvider from './NcPopoverTriggerProvider.vue'
  * @typedef {import('focus-trap').FocusTargetValueOrFalse} FocusTargetValueOrFalse
  * @typedef {FocusTargetValueOrFalse|() => FocusTargetValueOrFalse} SetReturnFocus
  */
-
 export default {
 	name: 'NcPopover',
 
@@ -239,6 +238,7 @@ export default {
 	data() {
 		return {
 			internalShown: this.shown,
+			animationDuration: 100,
 		}
 	},
 
@@ -254,6 +254,7 @@ export default {
 
 	mounted() {
 		this.checkTriggerA11y()
+		this.animationDuration = parseInt(getComputedStyle(this.$el).getPropertyValue('--animation-quick')) || 100
 	},
 
 	beforeDestroy() {
@@ -385,22 +386,27 @@ export default {
 			await this.useFocusTrap()
 			this.addEscapeStopPropagation()
 
+			setTimeout(() => {
 			/**
 			 * Triggered after the tooltip was visually displayed.
 			 *
 			 * This is different from the 'show' and 'apply-show' which
 			 * run earlier than this where there is no guarantee that the
 			 * tooltip is already visible and in the DOM.
 			 */
-			this.$emit('after-show')
+				this.$emit('after-show')
+			}, this.animationDuration)
 		},
-		afterHide() {
+		async afterHide() {
 			this.clearFocusTrap()
 			this.clearEscapeStopPropagation()
-			/**
-			 * Triggered after the tooltip was visually hidden.
-			 */
-			this.$emit('after-hide')
+
+			setTimeout(() => {
+				/**
+				 * Triggered after the tooltip was visually hidden.
+				 */
+				this.$emit('after-hide')
+			}, this.animationDuration)
 		},
 	},
 }