SOURCE

function getElementLeft(element){
  var actualLeft = element.offsetLeft;
  var current = element.offsetParent;

  while (current !== null){
    actualLeft += current.offsetLeft;
    current = current.offsetParent;
  }

  return actualLeft;
}

function getElementTop(element){
  var actualTop = element.offsetTop;
  var current = element.offsetParent;

  while (current !== null){
    actualTop += current.offsetTop;
    current = current.offsetParent;
  }	

  return actualTop;
}

var app = new Vue({
    el:"#app",
    data(){
      return {
          showFlag:false,
          iconList:[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
          iconState:'big',
          left:0,
          top:0,
          width:0,
          height:0,
          lastel:null,
      }
    },
		methods:{
			setItem(evt){
				this.iconState='small';
				this.width = 0;
				this.height = 0;
				this.left = this.lastel?getElementLeft(this.lastel) + 50:0;
				this.top = this.lastel?getElementTop(this.lastel):0;
				this.lastel = evt.target;
				let that = this;
				setTimeout(function(){
					let left = getElementLeft(evt.target) + 50;
					let top = getElementTop(evt.target);
					that.left = left;
					that.top = top;
					that.lastleft = left;
					that.lasttop = top;
					setTimeout(function(){
						that.width = '100%';
						that.height = "100px";
						that.left = 0;
						that.top = 0;
					},300)
				},300)
			},
			reset(){
				this.iconState='big';
				this.left = 0;
				this.top = 0;
				this.delay = 0;
				this.width = 0;
				this.height = 0;
			}
		}
})

<div id="app">
  <div ref="div"
			:style="'left: '+left+'px;top: '+top+'px;width: '+width+';height: '+height+';'"
			class="main-content">
		</div>
		<div :class="'main-icons-'+iconState">
			<div class="one-icon"
				v-for="(item,index) in iconList"
				:key="index"
				@click="setItem($event)"></div>
		<button @click="reset">reset</button>
		</div>
</div>

#app {
  position:relative;
}
.main-content{
  background-color: darkred;
  position: absolute;
  transition: all ease-in-out .3s;
}
.main-icons-big,.main-icons-small {
  position: absolute;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  transition: all ease 0.6s;
}
.main-icons-big{
  top: 100px;
}
.main-icons-small{
  top: 500px;
}
.one-icon{
  background-color: #FFB6C1;
  margin: 10px;
  transition: all ease 0.6s;
}
.main-icons-big .one-icon{
  width: 200px;
  height: 200px;
}
.main-icons-small .one-icon{
  width: 100px;
  height: 100px;
}