Edit in JSFiddle

Vue.component('my-transition', {  
  template: `
  	<div id="demo">
	  	<button @click="show = !show">
	    	Toggle
	  	</button>

	  	<button @click="addBlock">
	    	AddButton
	  	</button>

	  	<transition-group name="add-block">
	  		<span v-for="block in blocks" v-bind:key="block.id">

				<div v-if="block.id ===1">
				  	<transition name="fade">
				  		<div class="transition-wrapper" v-show="show">
					  		<div :style="{ 'background-color': colors[block.id-1] }" class="block">
					    		<p v-text="block.text"></p>
					    	</div>
						</div>
				  	</transition>
				</div>

				<div v-else>
			  		<div :style="{ 'background-color': colors[block.id-1] }" class="block">
			    		<p v-text="block.text"></p>
			    	</div>
				</div>

			</span>	


 		  <div id="block3" class="block" :key="1000" style="background:#cccccc">
				<p>Other block</p>
		  </div> 

		 </transition-group>
	</div>
  `,
  data() {
    return {
    		show: true,
				blocks: [{
					id: 1,
					text: 'Block 1'
				},{
					id: 2,
					text: 'Block 2'
				}],
				colors: ['#6495ED','#DEB887','#FF7F50','#696969','#5F9EA0','#6495ED','#DEB887','#FF7F50','#696969','#5F9EA0']
      }
    },
    methods: {
    	addBlock() {
        this.blocks.push({id:this.blocks.length+1,text:`Block ${(this.blocks.length+1)}`})
      }
    }
})

const app = new Vue({
    el: '#transition-single'
});

<script src="https://unpkg.com/vue"></script>

<div id="transition-single">
  <my-transition></my-transition>
</div>   

	.transition-wrapper {
		overflow:hidden;
	}

	.block {
		height: 100px;
		color:white;
		width: 300px;
		padding: 10px;
		display: inline-block;
	}

	button {
		margin-bottom:10px;
	}

	p {
		font-size: 20px;
	}

	.fade-leave, .fade-enter-to {
	  	max-height: 100px;		
	}

	.fade-enter-active, .fade-leave-active {
	  transition: all 1.5s;
	}
  
	.fade-enter, .fade-leave-to {
	   opacity: 0;
		 max-height:0px;
	}

	.add-block-move {
	  transition: transform 1s;
	}