Vue.js 如何在vue过渡中添加动态值作为最大高度？

在下面的代码示例中，我使用的是vue转换标记 我想转换最大高度。 我不想硬编码这些值，而是想用JS获取滚动高度值

例如。 获取这两个项目的滚动高度，并将最大高度设置为最大值，将最小高度设置为最小值

转换正在SCS中定义，然后在标记中引用 有没有办法在Vue转换中使用这些动态值

使用此最小宽度0会使其收缩过多，而作为硬编码值的最大宽度有点脆弱

Vue

---

一个粗略的算法是

您需要在组件的数据对象内声明变量，如下所示

数据：{ 最大高度：0， 最小高度：0， divOneHeight:0， 高度：0 }

您需要向相应的div元素添加ref属性，如下所示。 比如说

在methods对象下定义一个方法，如下所示

在组件生命周期的挂载方法中调用上述方法

最后，除了参考scss类外，还应按如下所示重置最大高度。比如说

只需尝试执行上述步骤

<transition name="component-fade" mode="out-in">
    <div key="search" v-if="searchSite">
         <SiteSearchBox />
     </div>

    <div key="works" v-else>
        <WorksSearchBox" />
    </div>
</transition>

.component-fade-enter-active {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;
        max-height: 500px;

}

.component-fade-leave-active {
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    max-height: 500px;

}

.component-fade-enter, .component-fade-leave-to {
    max-height: 0;
}

methods: {
 yourMethodToFindDivHeights: function(el)
   {
      //Determine the heights
     divOneHeight =  this.$refs.div1.$el.clientHeight;
     divTwoHeight =  this.$refs.div2.$el.clientHeight;
     maxHeight = //your calculation goes here
     minHeight = //your calculation goes here
   }