mastered vuejs transitions

2019-09-24 16:49:14 +02:00
parent 13479074b4
commit 665a5154d7
4 changed files with 104 additions and 61 deletions
@@ -0,0 +1,47 @@
+
+//  _                    _ _   _
+// | |_ _ _ __ _ _ _  __(_) |_(_)___ _ _  ___
+// |  _| '_/ _` | ' \(_-< |  _| / _ \ ' \(_-<
+//  \__|_| \__,_|_||_/__/_|\__|_\___/_||_/__/
+@mixin accordeon-transition($h){
+  &.accordeon-enter,
+  &.accordeon-leave-to{
+    // opacity: 0;
+    height:0.01vh;
+    padding-top: 0;
+    padding-bottom: 0;
+    // transform: translateY(100%);
+    // transform: translate3d(0, 100%, 0);
+  }
+  &.accordeon-enter-to,
+  &.accordeon-leave{
+    // opacity:1;
+    height:$h;
+    // transform: translateY(0%);
+    // transform: translate3d(0, 0, 0);
+  }
+  &.accordeon-enter-active{
+    transition: all 300ms ease-in-out;
+  }
+  &.accordeon-leave-active{
+    transition: all 200ms ease-in-out;
+  }
+
+}
+
+@mixin fade-transition() {
+  &.fade-enter,
+  &.fade-leave-to{
+    opacity: 0;
+  }
+  &.fade-enter-to,
+  &.fade-leave{
+    opacity:1;
+  }
+  &.fade-enter-active{
+    transition: all 300ms ease-in-out;
+  }
+  &.fade-leave-active{
+    transition: all 200ms ease-in-out;
+  }
+}