fix: fix expandTransition

vben
1 parent a0b09e74
Showing 5 changed files with 120 additions and 37 deletions
.vscode/settings.json
src/components/Transition/index.ts
src/components/Transition/src/CollapseTransition.tsx
src/components/Transition/src/ExpandTransition.ts
src/components/Transition/src/ExpandTransition.vue
@@ -116,15 +116,21 @@
   // ================ Eslint ===================
   // ===========================================
   "eslint.enable": true, // 是否开启eslint
-
   "eslint.options": {
     // 配置
-    "plugins": ["html", "vue", "javascript", "jsx", "typescript"]
+    "plugins": [
+      "html",
+      "vue",
+      "javascript",
+      "jsx",
+      "typescript"
+    ]
   },
   "eslint.autoFixOnSave": true, // 保存自动格式化
   // ===========================================
   // ================ Vetur ====================
   // ===========================================
+  "vetur.experimental.templateInterpolationService": true,
   "vetur.format.options.tabSize": 2,
   "vetur.format.defaultFormatter.html": "js-beautify-html", // 使用js-beautify-html格式化
   "vetur.format.defaultFormatter.scss": "prettier", // 使用js-beautify-html格式化
@@ -244,7 +250,9 @@
   "[markdown]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "cSpell.words": ["yfboilerplate"],
+  "cSpell.words": [
+    "yfboilerplate"
+  ],
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   }
-import {
-  //  createSimpleTransition,
-  createJavascriptTransition,
-} from './src/CreateTransition';
+// import {
+//   //  createSimpleTransition,
+//   createJavascriptTransition,
+// } from './src/CreateTransition';
-import ExpandTransitionGenerator from './src/ExpandTransition';
+// import ExpandTransitionGenerator from './src/ExpandTransition';
 export { default as CollapseTransition } from './src/CollapseTransition';
+// export { default as CollapseTransition } from './src/CollapseTransition';
 // export const FadeTransition = createSimpleTransition('fade-transition');
 // export const ScaleTransition = createSimpleTransition('scale-transition');
@@ -20,12 +21,14 @@ export { default as CollapseTransition } from &#39;./src/CollapseTransition&#39;;
 // export const ScaleRotateTransition = createSimpleTransition('scale-rotate-transition');
 // Javascript transitions
-export const ExpandTransition = createJavascriptTransition(
-  'expand-transition',
-  ExpandTransitionGenerator()
-);
+// export const ExpandTransition = createJavascriptTransition(
+//   'expand-transition',
+//   ExpandTransitionGenerator()
+// );
 // export const ExpandXTransition = createJavascriptTransition(
 //   'expand-x-transition',
 //   ExpandTransitionGenerator('', true)
 // );
+
+export { default as ExpandTransition } from './src/ExpandTransition.vue';
-import type { PropType } from 'vue';
-
 // collapse 展开折叠
 import { defineComponent } from 'vue';
 import { getSlot } from '/@/utils/helper/tsxHelper';
-import { createJavascriptTransition } from './CreateTransition';
-import ExpandTransitionGenerator from './ExpandTransition';
+// import { createJavascriptTransition } from './CreateTransition';
+import ExpandTransition from './ExpandTransition.vue';
-export const ExpandTransition = createJavascriptTransition(
-  'expand-transition',
-  ExpandTransitionGenerator()
-);
+// 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);
+  setup(_, { slots }) {
+    return () => <ExpandTransition>{() => getSlot(slots)}</ExpandTransition>;
   },
 });
@@ -34,9 +34,9 @@ export default function (expandedParentClass = &#39;&#39;, x = false) {
       el.style.setProperty('transition', 'none', 'important');
       el.style.overflow = 'hidden';
-      const offset = `${el[offsetProperty]}px`;
+      // const offset = `${el[offsetProperty]}px`;
-      el.style[sizeProperty] = '0';
+      // el.style[sizeProperty] = '0';
       void el.offsetHeight; // force reflow
@@ -47,7 +47,7 @@ export default function (expandedParentClass = &#39;&#39;, x = false) {
       }
       requestAnimationFrame(() => {
-        el.style[sizeProperty] = offset;
+        // el.style[sizeProperty] = offset;
       });
     },
@@ -84,6 +84,6 @@ export default function (expandedParentClass = &#39;&#39;, x = false) {
     const size = el._initialStyle[sizeProperty];
     el.style.overflow = el._initialStyle.overflow!;
     if (size != null) el.style[sizeProperty] = size;
-    delete (el as any)._initialStyle;
+    Reflect.deleteProperty(el, '_initialStyle');
   }
 }
+<template>
+  <transition v-on="on">
+    <slot></slot>
+  </transition>
+</template>
+<script lang="ts">
+  import { addClass, removeClass } from '/@/utils/domUtils';
+  import { defineComponent } from 'vue';
+  export default defineComponent({
+    name: 'CollapseTransition',
+    setup() {
+      return {
+        on: {
+          beforeEnter(el: any) {
+            addClass(el, 'collapse-transition');
+            if (!el.dataset) el.dataset = {};
+
+            el.dataset.oldPaddingTop = el.style.paddingTop;
+            el.dataset.oldPaddingBottom = el.style.paddingBottom;
+
+            el.style.height = '0';
+            el.style.paddingTop = 0;
+            el.style.paddingBottom = 0;
+          },
+
+          enter(el: any) {
+            el.dataset.oldOverflow = el.style.overflow;
+            if (el.scrollHeight !== 0) {
+              el.style.height = el.scrollHeight + 'px';
+              el.style.paddingTop = el.dataset.oldPaddingTop;
+              el.style.paddingBottom = el.dataset.oldPaddingBottom;
+            } else {
+              el.style.height = '';
+              el.style.paddingTop = el.dataset.oldPaddingTop;
+              el.style.paddingBottom = el.dataset.oldPaddingBottom;
+            }
+
+            el.style.overflow = 'hidden';
+          },
+
+          afterEnter(el: any) {
+            // for safari: remove class then reset height is necessary
+            removeClass(el, 'collapse-transition');
+            el.style.height = '';
+            el.style.overflow = el.dataset.oldOverflow;
+          },
+
+          beforeLeave(el: any) {
+            if (!el.dataset) el.dataset = {};
+            el.dataset.oldPaddingTop = el.style.paddingTop;
+            el.dataset.oldPaddingBottom = el.style.paddingBottom;
+            el.dataset.oldOverflow = el.style.overflow;
+
+            el.style.height = el.scrollHeight + 'px';
+            el.style.overflow = 'hidden';
+          },
+
+          leave(el: any) {
+            if (el.scrollHeight !== 0) {
+              // for safari: add class after set height, or it will jump to zero height suddenly, weired
+              addClass(el, 'collapse-transition');
+              el.style.height = 0;
+              el.style.paddingTop = 0;
+              el.style.paddingBottom = 0;
+            }
+          },
+
+          afterLeave(el: any) {
+            removeClass(el, 'collapse-transition');
+            el.style.height = '';
+            el.style.overflow = el.dataset.oldOverflow;
+            el.style.paddingTop = el.dataset.oldPaddingTop;
+            el.style.paddingBottom = el.dataset.oldPaddingBottom;
+          },
+        },
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .collapse-transition {
+    transition: 0.2s height ease-in-out, 0.2s padding-top ease-in-out,
+      0.2s padding-bottom ease-in-out;
+  }
+</style>