How to slide-transition two blocks with Vue.js? - vue.js

Question

I'm trying to write a Vue.js transition that slides out an element and at the same time slides in another one. I almost have it working, but the elements bump each other when the animation starts.
Here is my CodePen and the code:
// pug/jade
#app
.elems
transition-group(name="elem")
li.elem(v-for="(elem, index) in elems"
v-if="index === currentElem"
#click="currentElem = currentElem === 0 ? 1 : 0" :key="index") {{ elem
// stylus
.elems
display: flex
align-items: center
justify-content: center
height: 100vh
position:relative
.elem
display: block
text-align: center
font-size: 30px
padding: 30px
border-radius: 20px
border: 2px solid black
user-select: none
cursor: pointer
&-enter-active, &-leave-active
transition: 1s
&-enter
transform: translateX(-100vw)
&-leave-to
transform: translateX(100vw)
// js
new Vue({
el: '#app',
data() {
return {
elems: ['hello there', 'hello yourself'],
currentElem: 0
}
}
})

Answer 1

You need absolute position of the .elem as i understand what you want.
otherwise they cant colide
try this css:
.elems
display: flex
align-items: center
justify-content: center
height: 100vh
width: 100vw
position: relative
overflow: hidden
.elem
display: block;
position: absolute
top: 50%;
left: 50;
margin-top: -30px;
margin-left: -150px
text-align: center
width: 300px
height: 60px
line-height: 60px
vertical-align: middle
font-size: 30px
border-radius: 20px
border: 2px solid black
user-select: none
cursor: pointer
&-enter-active, &-leave-active
transition: 1s
&-enter
transform: translateX(-100vw)
&-leave-to
transform: translateX(100vw)