<div id="app">
  <button class="btn btn-primary" @click="toggle">toggle</button>
  <div class="wrapper clearfix">
    <div class="item1" :class="{'active': selectedIdx === 1}" v-show="selectedIdx === 1" transition="slide"></div>
    <div class="item2" :class="{'active': selectedIdx === 2}" v-show="selectedIdx === 2" transition="slide"></div>
</div>
</div>
.wrapper
  position relative
  width 100px
  height 200px
  overflow hidden
  > div
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    &.active
      z-index: 1
  .item1
    background-color blue
  .item2
    background-color red
    
.slide
  &-transition
    transition: transform .4s
  &-enter, &-leave
    transform: translateX(100%)
    
View Compiled
new Vue({
  el: '#app',
  data () {
    return {
      selectedIdx: 1
    }
  },
  methods: {
    toggle () {
      this.selectedIdx = this.selectedIdx === 1 ? 2 : 1
    }
  }
})
View Compiled
Rerun