Vue transition breaking layout while transitioning - vue.js

Question

I am facing a problem where, when i close the search text field (nav-search component), the layout breaks for a very short amount of time (less than a second). I think it is caused by the fact that the searchClosed property is updated to false before the animation ends, so the UI content that should be hidden appears before the search text field has fully disapeared.
How could i fix this behavior? Am i doing something wrong? I have no clue how to make :class="{'d-flex justify-space-around' : searchClosed, 'hidden': !searchClosed} sync with the transition effect.
Here is my block of code:
<template>
<v-app dark>
<v-app-bar fixed app class="app-bar">
<v-row>
<v-col cols="2">
<v-app-bar-nav-icon
aria-label="show-or-hide-navigation-menu"
#click.stop="drawer = !drawer"
/>
</v-col>
<v-col :class="{'d-flex justify-space-around' : searchClosed, 'hidden': !searchClosed}">
<nuxt-link aria-label="home-page" to="/" class="d-flex">
<v-img
:src="require('~/assets/images/example_Logo.svg')"
max-height="55px"
max-width="110px"
class="mb-1"
contain
></v-img>
</nuxt-link>
</v-col>
<v-col cols="2" :class="{'d-flex justify-end' : searchClosed, 'hidden' : !searchClosed}">
<v-btn aria-label="show-user-menu" icon>
<v-icon>mdi-account-circle</v-icon>
</v-btn>
<v-btn
aria-label="show-or-hide-search-input"
icon
#click="searchClosed = false"
>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-col>
<transition name="slide-fade">
<nav-search
v-show="!searchClosed"
#search-opened="searchClosed = false"
#search-closed="searchClosed = true"
></nav-search>
</transition>
</v-row>
</v-app-bar>
<v-navigation-drawer v-model="drawer" temporary fixed app>
<v-btn #click="handleDarkMode">Toggle Dark</v-btn>
<template v-if="loggedIn === undefined">
<nuxt-link to="/register">
<v-btn>Register</v-btn>
</nuxt-link>
<nuxt-link to="/login">
<v-btn>login</v-btn>
</nuxt-link>
</template>
<template v-else>
<v-btn #click="logout">Logout</v-btn>
</template>
</v-navigation-drawer>
<v-main>
<nav-search-results-list v-if="displaySearchResults" />
<Nuxt #click.native=";(searchClosed = true), (searchResults = false)" />
</v-main>
<v-footer :absolute="!fixed" app>
<span>© {{ new Date().getFullYear() }}</span>
</v-footer>
</v-app>
</template>
<script>
import NavSearch from '~/components/NavSearch.vue'
export default {
name: 'MainLayoutComponent',
components: { NavSearch },
data() {
return {
searchClosed: true,
drawer: false,
fixed: false,
title: 'exampleApp',
}
},
computed: {
displaySearchResults() {
return this.$store.state.search.displaySearchResults
},
loggedIn() {
return this.$auth.$storage.getState('user')
},
},
methods: {
handleDarkMode() {
this.$vuetify.theme.dark = !this.$vuetify.theme.dark
},
async logout() {
await this.$auth.logout('local')
this.$auth.$storage.removeUniversal('user')
},
},
}
</script>
<style scoped>
.slide-fade-enter-active {
transition: all 0.9s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
transform: translateX(10px);
opacity: 0;
}
.app-bar >>> .v-toolbar__content {
padding: 2px !important;
}
.hidden{
display: none;
}
</style>