<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
}
})
This Pen doesn't use any external CSS resources.