CSS3 transition优化动态内容加载后的高度变化

内容的展示能够通过自然的动画过渡呈现，会增强用户体验。

而动态内容呈现主要变化的关键因素就是——高度，而过渡效果最佳利器是CSS3 transition

CSS3 transition的难点

如果直接一行CSS代码就可以让动态呈现动画化，那就不需要本文了，早就各个站点都是这类优质体验的交互了。究其根本就是CSS3 transition的一个局限性，对"auto"*冷淡！

大家很好理解，所谓“过渡”，就是从一个地方到另外一个地方，比方说，从0到100. 但是，你来个从0到auto, 傻眼了吧。

然而，当我们在一个div呈现动态内容的时候，由于我们并不知道里面的内容(都说了是动态的嘛)，所以，我们的height其实都是auto，于是，就算transition: height .35s走起，也不会有动画效果的，我们需要的是固定值。

于是难点和关键点来了，如何赋予固定高度值？

固定高度值与transition触发

说白了很简单，当前高度固定值，获得动态内容载入后的高度固定值，再style设置，over~

代码实现

html部分

<template>
  <div>
    <div
      class="content"
      v-for="(item, index) in dataList"
      :key="index"
      @mouseenter="enter('.content', index)"
      @mouseleave="leave('.content', index)"
    >
      {{ item }}
    </div>
  </div>
</template>

css部分

  .content {
    width: 200px;
    height: 24px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid silver;
    cursor: pointer;
  }

js部分

export default {
  name: 'App',
  data () {
    return {
      dataList: []
    }
  },
  methods: {
    enter (id, index) {
      // 鼠标进入
      const element = document.querySelectorAll(id)[index]
      const oldHeight = element.offsetHeight
      element.style.height = 'auto'
      const autoHeight = element.offsetHeight
      element.style.height = oldHeight + 'px'
      element.style.transition = 'height 1s'
      setTimeout(function () {
        element.style.height = autoHeight + 'px'
      }, 0)
    },
    leave (id, index) {
      // 鼠标离开
      const element = document.querySelectorAll(id)[index]
      element.style.height = '24px'
    },
    createdMockData () {
      // 模拟不定内容
      for (let i = 0; i < 5; i++) {
        let randomNum = parseInt(Math.random() * 30)
        let content = ''
        while (randomNum--) {
          content += 'This is test content。'
        }
        this.dataList[i] = content
      }
    }
  },
  created () {
    this.createdMockData()
  }
}