ui: frontend api (#470) [skip-cache]

packages/ui-default/utils/slide.ts

@@ -0,0 +1,59 @@
+import 'jquery.easing';
+
+export async function slideDown($element, duration, fromCss = {}, toCss = {}) {
+  const originalStyl = $element.attr('style') || '';
+  $element.css({
+    position: 'absolute',
+    visibility: 'none',
+    display: 'block',
+  });
+  const height = $element.outerHeight();
+  $element.attr('style', originalStyl);
+  $element.css({
+    height: 0,
+    overflow: 'hidden',
+    display: 'block',
+    ...fromCss,
+  });
+  $element.height();
+  await $element
+    .transition({
+      height,
+      ...toCss,
+    }, {
+      duration,
+      easing: 'easeOutCubic',
+    })
+    .promise();
+  $element.attr('style', originalStyl);
+  $element.css({
+    display: 'block',
+  });
+}
+
+export async function slideUp($element, duration, fromCss = {}, toCss = {}) {
+  const originalStyl = $element.attr('style') || '';
+  const height = $element.outerHeight();
+  $element.css({
+    height,
+    overflow: 'hidden',
+    display: 'block',
+    ...fromCss,
+  });
+  $element.height();
+  await $element
+    .transition({
+      height: 0,
+      ...toCss,
+    }, {
+      duration,
+      easing: 'easeOutCubic',
+    })
+    .promise();
+  $element.attr('style', originalStyl);
+  $element.css({
+    display: 'none',
+  });
+}
+
+window.Hydro.utils.slide = { slideUp, slideDown };