How to slide-transition two blocks with 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
    }
  }
})

Try setting the mode on the transition to out-in. Setting the display on .elem to inline-block will stop the shifting up, also. — user320487
– user320487, Commented Jan 19, 2018 at 4:54
@btl That almost works, but at the end of the animation it snaps back into place. Is there a way to fix that? — nachocab
– nachocab, Commented Jan 19, 2018 at 16:14

Georgi Antonov · Accepted Answer · 2018-01-19 10:27:13Z

3

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)

answered Jan 19, 2018 at 10:27

Georgi Antonov

1,6611 gold badge23 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nachocab Over a year ago

Nice, two things: 1) should left be 50%? 2) Is there any way to be more precise defining the top and left margin?

Georgi Antonov Over a year ago

well if you want to make it centered without knowing the width and height you can left: 50%; top: 50%; transform: translateX (-50%) transform: translateY (-50%)

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related