实现过渡效果

在做项目的时候，产品说我点击变化需要有个过渡，结合实际最终实现了效果，来mark一下。
这里还涉及到动态绑定类

<template>
  <div class="container TrajectoryTable"
    :style="'width:' + docWidth + '%;' + 'height:' + docHeight + 'px'"
    v-loading.body="dialogLoading" 
    element-loading-text="拼命加载中">
    <div class="tableTop">
      <div style="float: right;">
        <el-button @click="enlargeTable">
          <i class="iconfont" :class="icon === true ? 'icon-caozuo_suoxiao' : 'icon-caozuo_quanpingfangda'"></i>
        </el-button>
      </div>
    </div>
    <div class="mainTable">
      <table-form 
        v-loading.body="isLoadingTableData"
        :colData="colData" 
        :data="tableData" 
        :colWidth="120"
        :max-height="height"
        :row-key="rowKey"
        :submiting="submiting"
        :isShowOper="isShowOper"
        :stripe="true"
        border 
        :sortable="false"
        >  
        <el-table-column
        type="index"
        label="序号"
        width="50">
        </el-table-column>    
        <el-table-column
          v-for="item in colData"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :align="item.align"
          :sortable="false">     
        </el-table-column>       
      </table-form>
    </div>
  </div>
</template>

<script>
import TableForm from '@/components/Table.vue'

export default {
  name: 'TrajectoryTable',
  components: {
    TableForm
  },
  data () {
    return {
      isLoadingTableData: false, // 懒加载表单
      dialogLoading: false, // 懒加载整个页面
      colData: [],
      tableData: null,
      isShowOper: false,
      rowKey: 'domainId',
      height: '150',
      docWidth: '50',
      docHeight: '200',
      sortable: true,
      submiting: false,
      icon: false
    }
  },
  mounted () {
    this.inits()
  },
  methods: {
    inits () {     
      this.colData = [
        {prop: 'laupTime', label: '时间', width: '200', sortable: true, align: 'center'},
        {prop: 'targetName', label: '位置', width: '200', sortable: true, align: 'center'},
        {prop: 'eventTitle', label: '速度', sortable: true, align: 'center'},
        {prop: 'status', label: '状态', width: '300', sortable: true, align: 'center'},
        {prop: 'audistatus', label: '里程', width: '90', sortable: true, align: 'center'}
      ] 
      this.tableData = []    
    },
    // 点击变化函数
    enlargeTable () {
      if (this.icon) {
        this.docWidth = '50'
        this.docHeight = '200'
        this.height = '160'
        this.icon = false
      } else {
        this.docWidth = '90'
        this.docHeight = '500'
        this.height = '450'
        this.icon = true
      }     
    }
  }
}
</script>

<style lang="scss">
.TrajectoryTable {
  width: 50%;
  height: 200px;
  background: rgba(80, 92, 100, 0.8);
  position: absolute;
  bottom: 2px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  padding: 0 8px;
  transition: all 0.5s; // 划重点，过渡函数

  .tableTop {
    height: 40px;
    padding: 1px;

    .el-button {
      padding: 8px 10px;
    }
    .el-button+.el-button {
      margin-left: 0px;
    }
  }
  .mainTable {
    padding: 0;
    overflow: auto;
    // margin-top: 30px;
  }

}
</style>

实现效果：