SOURCE

function out(event) {
  console.log(event)
  let el = event.target
  let parent = el.parentNode
  let ghost = document.createElement('div')
  ghost.classList.add('item', 'ghost')
  ghost.style.width = el.offsetWidth
  ghost.style.height = el.offsetHeight
  el.classList.toggle('out')
  parent.insertBefore(ghost, el)
}
function close(event) {
  let el = event.target.parentNode
  console.log(el)
  if (el.classList.contains('out')) {
    el.classList.toggle('out')
  }
}

<div id="box">
  <div id="d1" class="item"></div>
  <div id="d2" class="item" onclick="out(event)">
    <span class="close" onclick="close(event)">关闭</span>
  </div>
  <div id="d3" class="item"></div>
  <div id="d4" class="item"></div>
</div>

#box {
  display: flex;
  flex-flow: column;
  background: #eee;
  padding: 10px;
  .item {
    top: 78px;
    left: 0px;
    transition: all 1s;
    background: #ddd;
    width: 100px;
    height: 50px;
    margin: 5px;
    .close{
      display: none
    }
    &.out{
      position: absolute;
      left: 50%;
      top: 50%;
      width: 200px;
      height: 100px;
      margin: -50px 0 0 -100px;
      .close{
        display: block
      }
    }
  }
  .ghost {
    border: 1px dashed #ddd;
    background: none
  }
}