idealny efekt rozwijania do menu

frontend/app/src/App.vue

@@ -9,6 +9,7 @@
 export default {
   name: 'App'
 }
+// https://codepen.io/anon/pen/BGzVpK
 </script>
 
 <style>

frontend/app/src/components/HelloWorld.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="hello2">
-    <sidenav-menu></sidenav-menu>
+    <transition-element></transition-element>
+    <!-- <sidenav-menu></sidenav-menu> -->
   </div>
 </template>
 

frontend/app/src/components/TransitionElement.vue

@@ -0,0 +1,60 @@
+<template>
+    <div id="transition-element" class="demo" >
+  <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>
+</template>
+
+
+<script>
+
+
+
+
+export default {
+
+    data() {
+        return{
+        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()
+    }
+};
+</script>
+
+
+<style scoped>
+
+p {
+    height: 0;
+    overflow: hidden;
+    transition: 1s;
+}
+
+</style>

frontend/app/src/main.js

@@ -5,9 +5,12 @@ import App from './App'
 import router from './router'
 import { store } from './store/store' //importowanie central store; 
 import SidenavMenu from '@/components/SidenavMenu'
+import TransitionElement from '@/components/TransitionElement'
 
 
 Vue.component('sidenav-menu', SidenavMenu) // globalnby import menu
+Vue.component('transition-element', TransitionElement) // globalnby import menu
+
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */