JSFiddle - React, Tailwind, and code Playground

by rezaxdi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <p ref="myText" :style="[isActive ? { height : computedHeight } : {}]">
    Now it's smooth - getting closer to BS4 collapse, but now I need to know the exact height of each section at a particular screen size to set the max-height. Over-compensating max-width work ok, but is still a bit 'jerky'. Is there a way to calculate an elements height before starting the show/hide? If the max-height value is too small, elements overlap.
  </p>
  <button @click="toggle">Open / Close</button>
</div>

CSS

p {
    height: 0;
    overflow: hidden;
    transition: 1s;
}

JavaScript

new Vue({
    el: '#app',
    data: {
        isActive: false,
        computedHeight: 0
    },
    methods: {
      toggle: function(){
          this.isActive = !this.isActive;
      },
      initHeight: function(){

        this.$refs['myText'].style.height = 'auto';
        this.$refs['myText'].style.position = 'absolute';
        this.$refs['myText'].style.visibility = 'hidden';
        this.$refs['myText'].style.display = 'block';

        const height = getComputedStyle(this.$refs['myText']).height;      
        this.computedHeight= height;  

        this.$refs['myText'].style.position = null;
        this.$refs['myText'].style.visibility = null;
        this.$refs['myText'].style.display = null;
        this.$refs['myText'].style.height = 0;

      }
    },
    mounted: function(){
      this.initHeight()
    }
});