feat(transition): add transition comp and demo

vben
1 parent 2628fb55
Showing 5 changed files with 125 additions and 20 deletions
CHANGELOG.zh_CN.md
src/components/Transition/index.ts
src/router/menus/modules/demo/comp.ts
src/router/routes/modules/demo/comp.ts
src/views/demo/comp/transition/index.vue
@@ -6,6 +6,7 @@
 - 新增 tinymce 富文本组件
 - 表单新增 submitOnReset 控制是否在重置时重新发起请求
 - 表格新增`sortFn`支持自定义排序
+- 新增动画组件及示例
 ### ✨ Refactor
-// 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');
-// 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');
+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(
@@ -26,9 +23,9 @@ export { default as CollapseTransition } from &#39;./src/CollapseTransition&#39;;
 //   ExpandTransitionGenerator()
 // );
-// export const ExpandXTransition = createJavascriptTransition(
-//   'expand-x-transition',
-//   ExpandTransitionGenerator('', true)
-// );
+export const ExpandXTransition = createJavascriptTransition(
+  'expand-x-transition',
+  ExpandTransitionGenerator('', true)
+);
 export { default as ExpandTransition } from './src/ExpandTransition.vue';
@@ -13,6 +13,10 @@ const menu: MenuModule = {
         path: 'countTo',
         name: '数字动画',
       },
+      {
+        path: 'transition',
+        name: '动画组件',
+      },
       {
         path: 'scroll',
@@ -24,6 +24,14 @@ export default {
       },
     },
     {
+      path: '/transition',
+      name: 'transitionDemo',
+      component: () => import('/@/views/demo/comp/transition/index.vue'),
+      meta: {
+        title: '动画组件',
+      },
+    },
+    {
       path: '/countTo',
       name: 'CountTo',
       component: () => import('/@/views/demo/comp/count-to/index.vue'),
+<template>
+  <div class="p-4">
+    <div class="flex">
+      <Select
+        :options="options"
+        v-model:value="value"
+        placeholder="选择动画"
+        :style="{ width: '150px' }"
+      />
+      <a-button type="primary" class="ml-4" @click="start"> start </a-button>
+    </div>
+    <component :is="`${value}Transition`">
+      <div class="box" v-show="show"></div>
+    </component>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { Select } from 'ant-design-vue';
+  import {
+    FadeTransition,
+    ScaleTransition,
+    SlideYTransition,
+    ScrollYTransition,
+    SlideYReverseTransition,
+    ScrollYReverseTransition,
+    SlideXTransition,
+    ScrollXTransition,
+    SlideXReverseTransition,
+    ScrollXReverseTransition,
+    ScaleRotateTransition,
+    ExpandXTransition,
+    ExpandTransition,
+  } from '/@/components/Transition/index';
+
+  const transitionList = [
+    'Fade',
+    'Scale',
+    'SlideY',
+    'ScrollY',
+    'SlideYReverse',
+    'ScrollYReverse',
+    'SlideX',
+    'ScrollX',
+    'SlideXReverse',
+    'ScrollXReverse',
+    'ScaleRotate',
+    'ExpandX',
+    'Expand',
+  ];
+  const options = transitionList.map((item) => ({
+    label: item,
+    value: item,
+    key: item,
+  }));
+
+  export default defineComponent({
+    components: {
+      Select,
+      FadeTransition,
+      ScaleTransition,
+
+      SlideYTransition,
+      ScrollYTransition,
+      SlideYReverseTransition,
+      ScrollYReverseTransition,
+      SlideXTransition,
+      ScrollXTransition,
+      SlideXReverseTransition,
+      ScrollXReverseTransition,
+      ScaleRotateTransition,
+      ExpandXTransition,
+      ExpandTransition,
+    },
+    setup() {
+      const value = ref('Fade');
+      const show = ref(true);
+      function start() {
+        show.value = false;
+        setTimeout(() => {
+          show.value = true;
+        }, 300);
+      }
+      return { options, value, start, show };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .box {
+    width: 150px;
+    height: 150px;
+    margin-top: 20px;
+    background: pink;
+  }
+</style>