最近遇到一個需求，循環(huán)展示列表，每個列表要有收起和展開的功能，由于每個列表的高度不確定，在寫vue-transition的時候遇到了問題。

image.png

正常實現(xiàn)展開收縮的方法

<!--css-->
原鏈接  [http://www.itdecent.cn/p/6cd79c029167](http://www.itdecent.cn/p/6cd79c029167)
作者：[xilong](http://www.itdecent.cn/u/fdd91ad87feb)


.box{
    height:200px;width: 200px;
    background-color:black;
}
.draw-enter-active, .draw-leave-active {
    transition: all 1s ease;
}
.draw-enter, .draw-leave-to /* .fade-leave-active below version 2.1.8 */ {
    height: 0;
}

<div id="app">
    <button @click="boxshow = !boxshow">點擊展開/關閉</button>
    <transition name="draw">   <!--這里的name 和 css 類名第一個字段要一樣-->
        <div class="box"  v-show="boxshow"></div>
    </transition>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            boxshow:false
        },
    });
</script>

實現(xiàn)高度自適應的收縮和展開

參考原鏈接：https://segmentfault.com/a/1190000021856837
作者：oranges_c （關注他?。。。。。?！幫我節(jié)省了好長時間）

我一開始想?yún)⒖糴lement-ui 中 collapse 的處理方式，源碼也可以拿來用，后來上述作者給的處理方法也能正常使用，就沒再看源碼。以下是處理方式

collapse-transition.js,這個文件我是放在utils工具類中的

const transitionStyle = '0.3s height ease-in-out'
const Transition = {
  beforeEnter (el) {
    el.style.transition = transitionStyle
    if (!el.dataset) el.dataset = {}

    el.style.height = 0
  },

  enter (el) {
    if (el.scrollHeight !== 0) {
      el.style.height = `${el.scrollHeight}px`
    } else {
      el.style.height = ''
    }
    el.style.overflow = 'hidden'
  },

  afterEnter (el) {
    el.style.transition = ''
    el.style.height = ''
  },

  beforeLeave (el) {
    if (!el.dataset) el.dataset = {}
    el.style.height = `${el.scrollHeight}px`
    el.style.overflow = 'hidden'
  },

  leave (el) {
    if (el.scrollHeight !== 0) {
      el.style.transition = transitionStyle
      el.style.height = 0
    }
  },

  afterLeave (el) {
    el.style.transition = ''
    el.style.height = ''
  }
}

export default {
  name: 'CollapseTransition',
  functional: true,
  render (h, {
    children
  }) {
    const data = {
      on: Transition
    }
    return h('transition', data, children)
  }
}

頁面中使用方法
 <div class="expand">
        <div v-if="!boxshow"
             class="flex"
             @click="boxshow = !boxshow">
          <span>展開</span>
          <i class="h-icon-angle_down"></i>
        </div>
        <div v-if="boxshow"
             class="flex"
             @click="boxshow = !boxshow">
          <span>收起</span>
          <i class="h-icon-angle_up"></i>
        </div>
   </div>

<collapse-transition>
  <div class="cashbox-body expandBox"
           v-if="boxshow">
你的具體內(nèi)容放在這里
</div>
</collapse-transition>

import CollapseTransition from '@/utils/collapse-transition'
export default {
  components: {
    'collapse-transition': CollapseTransition
  },
  data () {
    return {
      boxshow: true
    }
  }
}

原鏈接寫的更詳細，各位可以參考原鏈接哦！