vue 展开收起（高度不固定，还要有平滑的过渡效果）

找了好多案例都不是很顺滑，最终还是功夫不负有心人，找到了一个非常棒的案例，只是简单地尝试一下，以后使用可以在进行全面的封装来公共使用

方法一： 

<template>
  <div class="panelMain">
    <div class="panel">
      <!-- body -->
      <transition
        name="panel-fade"
        @enter="enter"
        @before-leave="beforeLeave"
        @leave="leave"
      >
        <div class="panel__body" v-show="ifShowBody" ref="panel__body_height">
          <slot>
               <div class="box"></div>
          </slot>
        </div>
      </transition>
      <!-- footer -->
      <div class="panel__footer" @click="iconClick">{{ifShowBody? '收起': '更多'}}</div>
    </div>
    <slot name="main">
        <div class="main" ref="main"></div>
    </slot>
  </div>
</template>
<script>
import velocity from "velocity-animate";

export default {
  name: "panel",
  props: {},
  data() {
    return {
      bodyHeight: 0,
      ifShowBody: true
    };
  },
  computed: {},
  mounted(){
       this.$refs.main.style.height = "calc(100% - "+ (this.$refs.panel__body_height.offsetHeight * 2 ) +"px)"; 
  },
  methods: {
    iconClick() {
      this.ifShowBody = !this.ifShowBody;
    },
    enter(el, done) {
      var self = this;
      velocity(
        el,
        { height: self.bodyHeight + "px" },
        { duration: 500, complete: done }
      );
       this.$refs.main.style.height = "calc(100% -  "+ (self.bodyHeight * 2) +"px)";
    },
    beforeLeave(el, done) {
      this.bodyHeight = el.clientHeight;
       this.$refs.main.style.height = "calc(100% -  "+ el.clientHeight +"px)";
    },
    leave(el, done) {
      el.style.height = el.clientHeight + "px";
      velocity(el, { height: "0px" }, { duration: 500, complete: done });
    }
  }
};
</script>
<style scoped>
.box {
  width: 100%;
  height: 100px;
  background-color: rgb(232, 238, 175);
}
.panel__body {
  overflow: hidden;
}
.panel__footer {
  width: 100%;
  height: 15px;
  text-align: center;
  font-size: 12px;
  background-color: paleturquoise;
  color: #000;
  cursor: pointer;
}
.main {
  width: 100%;
  background-color: palevioletred;
  margin: 10px auto;
  transition: all .8s ease;
}
.panelMain {
  width: 100%;
  height: 100%;
}
</style>

方法二：

使用了elementUI中的组件，如果项目中是vue+elementUI可以使用这个方法。

<template>
  <!-- 展开收起 -->
  <div class="elementCollapse">
    <div class="collapseHeader">
      <el-collapse-transition>
        <div v-show="show" class="collapseHeaderBox">
          <slot name="top"></slot>
        </div>
      </el-collapse-transition>
      <div class="collapseBtn" @click="show = !show">{{show?"收起":"展开"}} </div>
    </div>
    <div class="collapseBox">
      <div class="collapseBoxMain">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ElementCollapse",
  data() {
    return {
      show: true,
    }
  },
  mounted() { },
  methods: {}
}
</script>

<style lang='css' scoped>
.elementCollapse {
  width: 98%;
  height: 100%;
  margin: 0 auto;
  padding-top: 0.1rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box; 
}
.collapseBtn {
  width: 100%;
  height: 2vh;
  line-height: 2vh;
  text-align: center;
  font-size: 0.16rem;
  color: #000;
  background-color: aqua;
  cursor: pointer;
}
.collapseHeaderBox {
  height: calc(100% - 2vh);
}
.collapseHeader {
  background-color: rgb(201, 204, 18);
}

.collapseBox {
  margin-top: 1vh;
  flex: 1;
}
.collapseBoxMain {
  width: 100%;
  height: calc(100% - 1vh);
  background-color: rgb(102, 204, 18);
}
</style>

如果有帮助到大家的麻烦点赞，让晓鹏有更新的动力，谢谢！！！！