Vue component for dynamic height show/hide transitioning

transition.scss

.expand-enter-active,
.expand-leave-active {
  transition: height 0.4s ease;
  overflow: hidden;
}

.expand-enter,
.expand-leave-to {
  height: 0;
}

transitionexpand.js

  Vue.component('transition-expand', {
   name: 'TransitionExpand',
   functional: true,
   render(createElement, context) {
     const data = {
       props: {
         name: 'expand'
       },
       on: {
         afterEnter(element) {
           // eslint-disable-next-line no-param-reassign
           element.style.height = 'auto';
         },
         enter(element) {
           const { width } = getComputedStyle(element);

           /* eslint-disable no-param-reassign */
           element.style.width = width;
           element.style.position = 'absolute';
           element.style.visibility = 'hidden';
           element.style.height = 'auto';
           /* eslint-enable */

           const { height } = getComputedStyle(element);

           /* eslint-disable no-param-reassign */
           element.style.width = null;
           element.style.position = null;
           element.style.visibility = null;
           element.style.height = 0;
           /* eslint-enable */

           setTimeout(() => {
             // eslint-disable-next-line no-param-reassign
             element.style.height = height;
           });
         },
         leave(element) {
           const { height } = getComputedStyle(element);

           // eslint-disable-next-line no-param-reassign
           element.style.height = height;

           setTimeout(() => {
             // eslint-disable-next-line no-param-reassign
             element.style.height = 0;
           });
         },
       },
     };

     return createElement('transition', data, context.children);
   },
 })

transitionexpand_example.html

<transition-expand>
  <div class="answer" v-if='expanded'>
    <div class="html" v-html="answer"></div>
  </div>
</transition-expand>