initial commit

src/components/Transition/index.ts

@@ -0,0 +1,28 @@
+import { createSimpleTransition, createJavascriptTransition } from './src/CreateTransition';
+
+import ExpandTransitionGenerator from './src/ExpandTransition';
+
+export { default as CollapseTransition } from './src/CollapseTransition';
+
+export const FadeTransition = createSimpleTransition('fade-transition');
+export const ScaleTransition = createSimpleTransition('scale-transition');
+export const SlideYTransition = createSimpleTransition('slide-y-transition');
+export const ScrollYTransition = createSimpleTransition('scroll-y-transition');
+export const SlideYReverseTransition = createSimpleTransition('slide-y-reverse-transition');
+export const ScrollYReverseTransition = createSimpleTransition('scroll-y-reverse-transition');
+export const SlideXTransition = createSimpleTransition('slide-x-transition');
+export const ScrollXTransition = createSimpleTransition('scroll-x-transition');
+export const SlideXReverseTransition = createSimpleTransition('slide-x-reverse-transition');
+export const ScrollXReverseTransition = createSimpleTransition('scroll-x-reverse-transition');
+export const ScaleRotateTransition = createSimpleTransition('scale-rotate-transition');
+
+// Javascript transitions
+export const ExpandTransition = createJavascriptTransition(
+  'expand-transition',
+  ExpandTransitionGenerator()
+);
+
+export const ExpandXTransition = createJavascriptTransition(
+  'expand-x-transition',
+  ExpandTransitionGenerator('', true)
+);

src/components/Transition/src/CollapseTransition.tsx

@@ -0,0 +1,29 @@
+import type { PropType } from 'vue';
+
+// collapse 展开折叠
+import { defineComponent } from 'vue';
+import { getSlot } from '/@/utils/helper/tsxHelper';
+import { createJavascriptTransition } from './CreateTransition';
+import ExpandTransitionGenerator from './ExpandTransition';
+
+export const ExpandTransition = createJavascriptTransition(
+  'expand-transition',
+  ExpandTransitionGenerator()
+);
+export default defineComponent({
+  name: 'CollapseTransition',
+  components: {
+    ExpandTransition,
+  },
+  props: {
+    // 是否打开折叠功能
+    enable: {
+      type: Boolean as PropType<boolean>,
+      default: true,
+    },
+  },
+  setup(props, { slots }) {
+    return () =>
+      props.enable ? <ExpandTransition>{() => getSlot(slots)}</ExpandTransition> : getSlot(slots);
+  },
+});

src/components/Transition/src/CreateTransition.tsx

@@ -0,0 +1,81 @@
+import type { PropType } from 'vue';
+
+import { defineComponent, Transition, TransitionGroup } from 'vue';
+import { getSlot } from '/@/utils/helper/tsxHelper';
+
+type Mode = 'in-out' | 'out-in' | 'default' | undefined;
+
+export function createSimpleTransition(name: string, origin = 'top center 0', mode?: Mode) {
+  return defineComponent({
+    name,
+    props: {
+      group: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+      },
+      // hideOnLeave: {
+      //   type: Boolean as PropType<boolean>,
+      //   default: false,
+      // },
+      // leaveAbsolute: {
+      //   type: Boolean as PropType<boolean>,
+      //   default: false,
+      // },
+      mode: {
+        type: String as PropType<Mode>,
+        default: mode,
+      },
+      origin: {
+        type: String as PropType<string>,
+        default: origin,
+      },
+    },
+    setup(props, { slots, attrs }) {
+      const onBeforeEnter = (el: HTMLElement) => {
+        el.style.transformOrigin = props.origin;
+      };
+
+      return () => {
+        const Tag = !props.group ? Transition : TransitionGroup;
+        return (
+          <Tag name={name} mode={props.mode} {...attrs} onBeforeEnter={onBeforeEnter}>
+            {() => getSlot(slots)}
+          </Tag>
+        );
+      };
+    },
+  });
+}
+export function createJavascriptTransition(
+  name: string,
+  functions: Record<string, any>,
+  mode: Mode = 'in-out'
+) {
+  return defineComponent({
+    name,
+    props: {
+      mode: {
+        type: String as PropType<Mode>,
+        default: mode,
+      },
+    },
+    setup(props, { attrs, slots }) {
+      return () => {
+        return (
+          <Transition
+            name={name}
+            mode={props.mode}
+            {...attrs}
+            onBeforeEnter={functions.beforeEnter}
+            onEnter={functions.enter}
+            onLeave={functions.leave}
+            onAfterLeave={functions.afterLeave}
+            onLeaveCancelled={functions.afterLeave}
+          >
+            {() => getSlot(slots)}
+          </Transition>
+        );
+      };
+    },
+  });
+}

src/components/Transition/src/ExpandTransition.ts

@@ -0,0 +1,93 @@
+/**
+ * Makes the first character of a string uppercase
+ */
+export function upperFirst(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+interface HTMLExpandElement extends HTMLElement {
+  _parent?: (Node & ParentNode & HTMLElement) | null;
+  _initialStyle: {
+    transition: string;
+    visibility: string | null;
+    overflow: string | null;
+    height?: string | null;
+    width?: string | null;
+  };
+}
+
+export default function (expandedParentClass = '', x = false) {
+  const sizeProperty = x ? 'width' : ('height' as 'width' | 'height');
+  const offsetProperty = `offset${upperFirst(sizeProperty)}` as 'offsetHeight' | 'offsetWidth';
+
+  return {
+    beforeEnter(el: HTMLExpandElement) {
+      el._parent = el.parentNode as (Node & ParentNode & HTMLElement) | null;
+      el._initialStyle = {
+        transition: el.style.transition,
+        visibility: el.style.visibility,
+        overflow: el.style.overflow,
+        [sizeProperty]: el.style[sizeProperty],
+      };
+    },
+
+    enter(el: HTMLExpandElement) {
+      const initialStyle = el._initialStyle;
+      const offset = `${el[offsetProperty]}px`;
+
+      el.style.setProperty('transition', 'none', 'important');
+      el.style.visibility = 'hidden';
+      el.style.visibility = initialStyle.visibility!;
+      el.style.overflow = 'hidden';
+      el.style[sizeProperty] = '0';
+      /* eslint-disable-next-line */
+      void el.offsetHeight; // force reflow
+
+      el.style.transition = initialStyle.transition;
+
+      if (expandedParentClass && el._parent) {
+        el._parent.classList.add(expandedParentClass);
+      }
+
+      requestAnimationFrame(() => {
+        el.style[sizeProperty] = offset;
+      });
+    },
+
+    afterEnter: resetStyles,
+    enterCancelled: resetStyles,
+
+    leave(el: HTMLExpandElement) {
+      el._initialStyle = {
+        transition: '',
+        visibility: '',
+        overflow: el.style.overflow,
+        [sizeProperty]: el.style[sizeProperty],
+      };
+
+      el.style.overflow = 'hidden';
+      el.style[sizeProperty] = `${el[offsetProperty]}px`;
+      /* eslint-disable-next-line */
+      void el.offsetHeight; // force reflow
+
+      requestAnimationFrame(() => (el.style[sizeProperty] = '0'));
+    },
+
+    afterLeave,
+    leaveCancelled: afterLeave,
+  };
+
+  function afterLeave(el: HTMLExpandElement) {
+    if (expandedParentClass && el._parent) {
+      el._parent.classList.remove(expandedParentClass);
+    }
+    resetStyles(el);
+  }
+
+  function resetStyles(el: HTMLExpandElement) {
+    const size = el._initialStyle[sizeProperty];
+    el.style.overflow = el._initialStyle.overflow!;
+    if (size != null) el.style[sizeProperty] = size;
+    Reflect.deleteProperty(el, '_initialStyle');
+  }
+}