CODEWITHSUNDEEP
vue.jscss-transitions
nachocab
nachocab

Reputation: 14374

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

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.

enter image description here

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
    }
  }
})

Upvotes: 1

Views: 2565

Answers (1)

Georgi Antonov
Georgi Antonov

Reputation: 1641

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)

Upvotes: 3

Related Questions