From 8ad6d3fc7ba437add4d677e4834e016b48c4118d Mon Sep 17 00:00:00 2001
From: monastyr <mon4styr@gmail.com>
Date: Fri, 9 Nov 2018 23:30:49 +0100
Subject: [PATCH] idealny efekt rozwijania do menu

---
 frontend/app/src/App.vue                      |  1 +
 frontend/app/src/components/HelloWorld.vue    |  3 +-
 .../app/src/components/TransitionElement.vue  | 60 +++++++++++++++++++
 frontend/app/src/main.js                      |  3 +
 4 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 frontend/app/src/components/TransitionElement.vue

diff --git a/frontend/app/src/App.vue b/frontend/app/src/App.vue
index 34eaeba..42fe887 100644
--- a/frontend/app/src/App.vue
+++ b/frontend/app/src/App.vue
@@ -9,6 +9,7 @@
 export default {
   name: 'App'
 }
+// https://codepen.io/anon/pen/BGzVpK
 </script>
 
 <style>
diff --git a/frontend/app/src/components/HelloWorld.vue b/frontend/app/src/components/HelloWorld.vue
index 47303c1..edb27d5 100644
--- a/frontend/app/src/components/HelloWorld.vue
+++ b/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>
 
diff --git a/frontend/app/src/components/TransitionElement.vue b/frontend/app/src/components/TransitionElement.vue
new file mode 100644
index 0000000..e9cbc76
--- /dev/null
+++ b/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>
diff --git a/frontend/app/src/main.js b/frontend/app/src/main.js
index dde9e10..c099f2c 100644
--- a/frontend/app/src/main.js
+++ b/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 */