<div id="app">
  <transition-group name='slide-components' mode="out-in" class='trans'>
     <p :key='1' v-if='window == 1'>1</p>
  <p :key='2' v-if='window == 2'>2</p>
  <p :key='3' v-if='window == 3'>3</p>
  </transition-group>

  <button @click='window++'>Прибавить window</button>
  <button @click='window--'>Убавить window</button>
</div>
.slide-components-enter-active {
  transition: all 0.2s ease;
}
.slide-components-leave-active {
  transition: all 0.2s ease;
}
.slide-components-enter, .slide-components-leave-to
/* .slide-fade-leave-active до версии 2.1.8 */ {
  transform: translateX(20px);
  opacity: 0;
}
new Vue({
  el:'#app',
  data:{
    window: 1
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js