Table Drop Test

by Tuan Truong

HTML

<div id="test">
  <transition-group name="fade" class="table-wrapper" tag="div">
    <div class="table-row" key="dynamic" @click="showTableDetail = !showTableDetail">
      <h1>Table Row</h1>
    </div>
    <div class="table-row__details" key="main-content" v-if="showTableDetail">
      <h2>I am table details</h2>
    </div>  
  </transition-group>
  
</div>

CSS

.table-row {
  width: 100%;
  background: #fff;
  height: 100px;
  border: 4px solid #eee;
}
.table-row__details {
  width: 50%;
  background: #adb5bd;
  color: #eee;
}

.table-wrapper {
  display: flex;
  flex-direction: column;
  >* {
    transition: all 0.5s;
    width:100%;
  };
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
  transform: translateY(10px);
}

.fade-leave-active {
  position: absolute;
}

Vue

new Vue({
	el: '#test',
  data: {
  	showTableDetail: false
  }
})