Vue: Slide on data change

by Max Sinev

HTML

<div id="app">
  <p>
    <button @click="selectAnother2">Select</button>
  </p>
  <transition name="some" appear mode="out-in">
    <div v-if="selectedItem" class="item" :key="selectedItem.id">
    <div>{{ selectedItem.title }}</div>
    <div>{{ selectedItem.description }}</div>
  </div>
  </transition>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.item {
  width: 200px;
  background: #00ff00;
  padding: 10px;
  transition: all 1s;
  position: relative;
  left: 0;
}

.some-enter {
  left: -40px;
  opacity: 0;
}

.some-leave, .some-enter-to {
  left: 0;
  opacity: 1;
}

.some-leave-to {
  left: 40px;
  opacity: 0;
}

Vue

let generate = () => {
	let o = Math.random().toString(16).substr(2);
	return {
  	id: o,
  	title: `Title ${o}`,
    description: `Description ${o}`
  }
}

new Vue({
  el: "#app",
  data: {
    selectedItem: null,
    newItem: null
  },
  mounted(){
  },
  methods: {
    selectAnother() {
    	this.newItem = generate(); 
    	if (!this.selectedItem) {
      	this.selectedItem = this.newItem;
      } else {
      	this.selectedItem = null;	
        setTimeout(() => this.selectedItem = this.newItem, 1010);
      }
		},
    selectAnother2() {
    	this.newItem = generate(); 
    	this.selectedItem = this.newItem;
    }
  }
})