How can I add a dynamic value as the max height in a vue transition?

Question

In the code example below I am using the vue transition tag I would like to transition the max height. Rather than having these values hard coded I'd like to get the scroll height values in JS.

example. Get the scroll height of both these items and make the max-height the value of the largest and the min-height the value of the smallest one.

The transition is being defined in SCSS and then referenced in the tag Is there a way to use these dynamic values with Vue transitions?

Having this min-width 0 is contracting it far too much and the max-width being a hard coded value is a little fragile

Vue

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

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

SCSS

.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;
}

Answer 1

A rough algorithm would be

1. You need to declare variables inside the data object of your component as below

   data: { maxHeight:0, minHeight:0, divOneHeight:0, divTwoHeight:0 }

2. You need to add ref attribute to the respective div elements as below. For example

   <div key="search" ref="div1"/><div key="works" ref="div2"/>

3. Define a method under the methods object as below

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
   }

4. Invoke the above method in mounted method of your component's life cycle.

5. Finally besides referring the scss class, reset the max-height as below. For example

< transition name="component-fade" mode="out-in" class="yourclass" max-height="maxHeight" />

Just try implementing the above steps