Transitioning element in Vue - css

Question

I'm somewhat new to Vue, and I'm working on trying to make a transition work. The outcome would look similar to the gif below. The element moving from right to left is one component in Vue, but the issue is I'm transitioning it from one Bootstrap column to another. From what I've seen online, there isn't an easy way to CSS transition while also changing the parent element, so what I've done is basically rendered the component twice, and delayed the second one. In the gif, you can see the point where it transitions and its a bit clunky.
I'm wondering if this is best practice, or if there's another, easier way to do this. Should I rework my whole structure to make them live under the same parent, and just change the position via CSS, or should I continue with what I've done and just work to smooth out the transition between the two elements?
<div class="d-flex align-items-center min-vh-100 hero">
<div class="container-fluid">
<div class="row hero-row d-flex">
<div class="col hero-left d-flex align-items-center">
<div class="w-100">
<transition appear name="fade-left" mode="out-in" >
<HeroNav v-if="$route.name!='Home'"/>
<h1 v-else>Hey, I'm George.</h1>
</transition>
</div>
</div>
<div class="col d-flex hero-right align-items-center">
<transition name="slide" mode="out-in">
<HeroNav v-if="$route.name=='Home'"/>
<div v-else>
</div>
</transition>
</div>
</div>
</div>
</div>
</template>
<script>
import HeroNav from '#/components/HeroNav.vue'
export default {
name: 'Hero',
components: { HeroNav }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hero {
background: #24292E;
height: 100%;
}
.hero-row {
height: 30em;
}
.hero-left {
border-right: 1px solid #AEC6CF;
}
.hero-left .nav-text{
float: right;
margin-right: 3em;
z-index: 1;
}
.hero-right .nav-text{
margin-left: 3em;
}
h1 {
color: #CFAEB5;
font-family: 'Lato', sans-serif;
font-size: 4rem !important;
font-weight: 100 !important;
text-align: right;
}
h3 {
color: #ffffff;
}
.fade-enter-active,
.fade-leave-active {
transition: all .5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.fade-left-enter-active,
.fade-left-leave-active {
transition: all 1s ease;
transition-delay: .15s;
}
.fade-left-enter-from,
.fade-left-leave-to {
opacity: 0;
}
.slide-enter-active,
.slide-leave-active {
transition: all 1.7s cubic-bezier(.17,.67,0,1);
}
.slide-leave-to {
transform: translateX(-29.4em);
opacity: 1;
}
</style>```