canrd-outside / order-erp-front · Commits

Commit 3713487c85f4b512ab3e13fcb4c89a14b9ee8d50

Authored by vben
1 parent 2628fb55

feat(transition): add transition comp and demo

Inline Side-by-side
Showing 5 changed files with 125 additions and 20 deletions
CHANGELOG.zh_CN.md
  View file @3713487
... ... @@ -6,6 +6,7 @@
6 6 - 新增 tinymce 富文本组件
7 7 - 表单新增 submitOnReset 控制是否在重置时重新发起请求
8 8 - 表格新增`sortFn`支持自定义排序
  9 +- 新增动画组件及示例
9 10  
10 11 ### ✨ Refactor
11 12  
... ...
src/components/Transition/index.ts
  View file @3713487
1   -// import {
2   -// // createSimpleTransition,
3   -// createJavascriptTransition,
4   -// } from './src/CreateTransition';
  1 +import { createSimpleTransition, createJavascriptTransition } from './src/CreateTransition';
5 2  
6   -// import ExpandTransitionGenerator from './src/ExpandTransition';
  3 +import ExpandTransitionGenerator from './src/ExpandTransition';
7 4  
8 5 export { default as CollapseTransition } from './src/CollapseTransition';
9 6 // export { default as CollapseTransition } from './src/CollapseTransition';
10 7  
11   -// export const FadeTransition = createSimpleTransition('fade-transition');
12   -// export const ScaleTransition = createSimpleTransition('scale-transition');
13   -// export const SlideYTransition = createSimpleTransition('slide-y-transition');
14   -// export const ScrollYTransition = createSimpleTransition('scroll-y-transition');
15   -// export const SlideYReverseTransition = createSimpleTransition('slide-y-reverse-transition');
16   -// export const ScrollYReverseTransition = createSimpleTransition('scroll-y-reverse-transition');
17   -// export const SlideXTransition = createSimpleTransition('slide-x-transition');
18   -// export const ScrollXTransition = createSimpleTransition('scroll-x-transition');
19   -// export const SlideXReverseTransition = createSimpleTransition('slide-x-reverse-transition');
20   -// export const ScrollXReverseTransition = createSimpleTransition('scroll-x-reverse-transition');
21   -// export const ScaleRotateTransition = createSimpleTransition('scale-rotate-transition');
  8 +export const FadeTransition = createSimpleTransition('fade-transition');
  9 +export const ScaleTransition = createSimpleTransition('scale-transition');
  10 +export const SlideYTransition = createSimpleTransition('slide-y-transition');
  11 +export const ScrollYTransition = createSimpleTransition('scroll-y-transition');
  12 +export const SlideYReverseTransition = createSimpleTransition('slide-y-reverse-transition');
  13 +export const ScrollYReverseTransition = createSimpleTransition('scroll-y-reverse-transition');
  14 +export const SlideXTransition = createSimpleTransition('slide-x-transition');
  15 +export const ScrollXTransition = createSimpleTransition('scroll-x-transition');
  16 +export const SlideXReverseTransition = createSimpleTransition('slide-x-reverse-transition');
  17 +export const ScrollXReverseTransition = createSimpleTransition('scroll-x-reverse-transition');
  18 +export const ScaleRotateTransition = createSimpleTransition('scale-rotate-transition');
22 19  
23 20 // Javascript transitions
24 21 // export const ExpandTransition = createJavascriptTransition(
... ... @@ -26,9 +23,9 @@ export { default as CollapseTransition } from './src/CollapseTransition';
26 23 // ExpandTransitionGenerator()
27 24 // );
28 25  
29   -// export const ExpandXTransition = createJavascriptTransition(
30   -// 'expand-x-transition',
31   -// ExpandTransitionGenerator('', true)
32   -// );
  26 +export const ExpandXTransition = createJavascriptTransition(
  27 + 'expand-x-transition',
  28 + ExpandTransitionGenerator('', true)
  29 +);
33 30  
34 31 export { default as ExpandTransition } from './src/ExpandTransition.vue';
... ...
src/router/menus/modules/demo/comp.ts
  View file @3713487
... ... @@ -13,6 +13,10 @@ const menu: MenuModule = {
13 13 path: 'countTo',
14 14 name: '数字动画',
15 15 },
  16 + {
  17 + path: 'transition',
  18 + name: '动画组件',
  19 + },
16 20  
17 21 {
18 22 path: 'scroll',
... ...
src/router/routes/modules/demo/comp.ts
  View file @3713487
... ... @@ -24,6 +24,14 @@ export default {
24 24 },
25 25 },
26 26 {
  27 + path: '/transition',
  28 + name: 'transitionDemo',
  29 + component: () => import('/@/views/demo/comp/transition/index.vue'),
  30 + meta: {
  31 + title: '动画组件',
  32 + },
  33 + },
  34 + {
27 35 path: '/countTo',
28 36 name: 'CountTo',
29 37 component: () => import('/@/views/demo/comp/count-to/index.vue'),
... ...
src/views/demo/comp/transition/index.vue 0 → 100644
  View file @3713487
  1 +<template>
  2 + <div class="p-4">
  3 + <div class="flex">
  4 + <Select
  5 + :options="options"
  6 + v-model:value="value"
  7 + placeholder="选择动画"
  8 + :style="{ width: '150px' }"
  9 + />
  10 + <a-button type="primary" class="ml-4" @click="start"> start </a-button>
  11 + </div>
  12 + <component :is="`${value}Transition`">
  13 + <div class="box" v-show="show"></div>
  14 + </component>
  15 + </div>
  16 +</template>
  17 +<script lang="ts">
  18 + import { defineComponent, ref } from 'vue';
  19 + import { Select } from 'ant-design-vue';
  20 + import {
  21 + FadeTransition,
  22 + ScaleTransition,
  23 + SlideYTransition,
  24 + ScrollYTransition,
  25 + SlideYReverseTransition,
  26 + ScrollYReverseTransition,
  27 + SlideXTransition,
  28 + ScrollXTransition,
  29 + SlideXReverseTransition,
  30 + ScrollXReverseTransition,
  31 + ScaleRotateTransition,
  32 + ExpandXTransition,
  33 + ExpandTransition,
  34 + } from '/@/components/Transition/index';
  35 +
  36 + const transitionList = [
  37 + 'Fade',
  38 + 'Scale',
  39 + 'SlideY',
  40 + 'ScrollY',
  41 + 'SlideYReverse',
  42 + 'ScrollYReverse',
  43 + 'SlideX',
  44 + 'ScrollX',
  45 + 'SlideXReverse',
  46 + 'ScrollXReverse',
  47 + 'ScaleRotate',
  48 + 'ExpandX',
  49 + 'Expand',
  50 + ];
  51 + const options = transitionList.map((item) => ({
  52 + label: item,
  53 + value: item,
  54 + key: item,
  55 + }));
  56 +
  57 + export default defineComponent({
  58 + components: {
  59 + Select,
  60 + FadeTransition,
  61 + ScaleTransition,
  62 +
  63 + SlideYTransition,
  64 + ScrollYTransition,
  65 + SlideYReverseTransition,
  66 + ScrollYReverseTransition,
  67 + SlideXTransition,
  68 + ScrollXTransition,
  69 + SlideXReverseTransition,
  70 + ScrollXReverseTransition,
  71 + ScaleRotateTransition,
  72 + ExpandXTransition,
  73 + ExpandTransition,
  74 + },
  75 + setup() {
  76 + const value = ref('Fade');
  77 + const show = ref(true);
  78 + function start() {
  79 + show.value = false;
  80 + setTimeout(() => {
  81 + show.value = true;
  82 + }, 300);
  83 + }
  84 + return { options, value, start, show };
  85 + },
  86 + });
  87 +</script>
  88 +<style lang="less" scoped>
  89 + .box {
  90 + width: 150px;
  91 + height: 150px;
  92 + margin-top: 20px;
  93 + background: pink;
  94 + }
  95 +</style>
... ...