element Table组件下拉上拉效果实现

2019-07-23更新

经过一段时间的学习 我发现了更为简单的方法，CSS的 transition属性   指定对应的属性完成需要多久时间。

因此我们定义了一个class

.carton{
  transition: height 5s;
}

设置test的class = carton  并修改函数  showTable   hiddenTable，并删除其他函数

showTable: function () {
      const div1 = document.getElementById('test')
      const div2 = document.getElementById('table')
      div1.style.height = div2.offsetHeight + 'px'
    },

hiddenTable: function () {
      const div1 = document.getElementById('test')
      div1.style.height = '0px'
    },

相对原来的代码 减少了大量js函数，将动画的实现过程交给CSS！

-----------------------------------------------以下是原答案------------------------------------

因为工组需要，在网上找了不少关于table组件下拉上拉效果的文章，可能因为代码太复杂了，太高深了 我个菜鸟看不太懂。所以只好自己想办法实现，幸好，想到了一个办法，办法很简单，利用css 的overflow属性。

CSS的overflo-y 设置为hidden，意味着超出高度的内容将被隐藏。 因此我们可以利用这个属性。

下面重头戏，一步步上代码！

第一步  先创建div 并 引入table组件

通过设置div的高度为0px  我们保证了table是被隐藏起来的。

接下来，我们通过js来控制上拉下拉动画， 核心就是一步步改变div的高度，这样就可以做到上拉下拉的效果

第二步，JS控制上拉下拉

showTable: function () {
      const div1 = document.getElementById('test')
      const div2 = document.getElementById('table')
      setTimeout(() => {
        this.show(div1, div1.offsetHeight, div2.offsetHeight)
      }, 0)
    },
    show: function (div, height, tableHeight) {
      div.style.height = height + 'px'
      if (height === tableHeight) {
        return
      }
      setTimeout(() => {
        this.show(div, height + 1, tableHeight)
      }, 10)
    },
    hiddenTable: function () {
      const div1 = document.getElementById('test')
      const div2 = document.getElementById('table')
      setTimeout(() => {
        this.hidden(div1, div2.offsetHeight)
      }, 0)
    },
    hidden: function (div, height) {
      div.style.height = height + 'px'
      if (height === 0) {
        return 
      }
      setTimeout(() => {
        this.hidden(div, height - 1)
      }, 10)
    }

第三步 加入防范措施，防范下拉过程中点击隐藏时不执行隐藏动画， 防止重复执行下拉 / 上拉动画

showTable: function () {
      // 防止下拉过程中二次点击重复触发
      if (this.showRuning) {
        return
      }
      this.showRuning = true
      this.hiddenRuning = false
      const div1 = document.getElementById('test')
      const div2 = document.getElementById('table')
      this.type = 'show'
      setTimeout(() => {
        this.show(div1, div1.offsetHeight, div2.offsetHeight)
      }, 0)
    },
    show: function (div, height, tableHeight) {
      div.style.height = height + 'px'
      if (height === tableHeight) {
        this.showRuning = false
        return
      }
      if (this.type === 'hidden') {
        this.showRuning = false
        return
      }
      setTimeout(() => {
        this.show(div, height + 1, tableHeight)
      }, 10)
    },
    hiddenTable: function () {
      // 防止下拉过程中二次点击重复触发
      if (this.hiddenRuning) {
        return 
      }
      this.showRuning = false
      this.hiddenRuning = true
      const div1 = document.getElementById('test')
      this.type = 'hidden'
      setTimeout(() => {
        this.hidden(div1, div1.offsetHeight)
      }, 0)
    },
    hidden: function (div, height) {
      div.style.height = height + 'px'
      if (height === 0) {
        this.hiddenRuning = false
        return 
      }
      if (this.type === 'show') {
        this.hiddenRuning = false
        return
      }
      setTimeout(() => {
        this.hidden(div, height - 1)
      }, 10)
    }

GAME OVER   

THANK YOU