vue+transition实现高度上的展开与折叠效果

一、整体逻辑

1.给transition标签赋值ref 通过this.$refs.target 可获取到 插槽元素

2.按照jquery里的actual方法的思路，在初始化的时候给插槽元素添加 如下属性, 就可以获取到元素实际高度

{
     display: block !important;
​
     visibility: hidden;
​
     position: static;
}

3.将实际高度通过如下语法绑定到插槽元素上

 .scale-enter-to {
​
   max-height: v-bind(initHeight);
​
 }

就可以实现高度的自适应展开和收缩了！

二、废话不说，上代码

<template>
  <transition ref="target" name="scale">
    <slot></slot>
  </transition>
</template>
​
<script>
export default {
  mounted() {
    if (this.count === 0) {
      let el = this.$refs.target
      el.classList.add('show')
      this.initHeight = el.offsetHeight + 'px'
      this.initWidth = el.offsetWidth + 'px'
      console.log(this.initHeight, this.initWidth)
      el.classList.remove('show')
    }
    this.count++
  },
  data() {
    return {
      initHeight: '',
      initWidth: '',
      count: 0
    }
  },
  methods: {}
}
</script>
​
<style lang="less" scoped>
.show {
  display: block !important;
  visibility: hidden;
  position: static;
}
​
.scale-enter-active,
.scale-leave-active {
  overflow: hidden;
  transition: all 0.25s ease;
}
​
.scale-enter-from {
  max-height: 0;
  max-width: 0;
}
​
.scale-enter-to {
  max-width: v-bind(initWidth);
  max-height: v-bind(initHeight);
}
​
.scale-leave-from {
  max-width: v-bind(initWidth);
  max-height: v-bind(initHeight);
}
​
.scale-leave-to {
  max-height: 0;
  max-width: 0;
}
</style>
​

三、结尾

因为没有见过直接在transition上添加ref属性获取插槽元素的用法，所以不确定有没有隐患，各位大佬可以提提意见！