Skip to content

Commit

Permalink
feat(transition): add transition comp and demo
Browse files Browse the repository at this point in the history
  • Loading branch information
anncwb committed Oct 25, 2020
1 parent 2628fb5 commit 3713487
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 20 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.zh_CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
- 新增 tinymce 富文本组件
- 表单新增 submitOnReset 控制是否在重置时重新发起请求
- 表格新增`sortFn`支持自定义排序
- 新增动画组件及示例

### ✨ Refactor

Expand Down
37 changes: 17 additions & 20 deletions src/components/Transition/index.ts
Original file line number Diff line number Diff line change
@@ -1,34 +1,31 @@
// 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(
// 'expand-transition',
// 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';
4 changes: 4 additions & 0 deletions src/router/menus/modules/demo/comp.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ const menu: MenuModule = {
path: 'countTo',
name: '数字动画',
},
{
path: 'transition',
name: '动画组件',
},

{
path: 'scroll',
Expand Down
8 changes: 8 additions & 0 deletions src/router/routes/modules/demo/comp.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,14 @@ export default {
title: '基础组件',
},
},
{
path: '/transition',
name: 'transitionDemo',
component: () => import('/@/views/demo/comp/transition/index.vue'),
meta: {
title: '动画组件',
},
},
{
path: '/countTo',
name: 'CountTo',
Expand Down
95 changes: 95 additions & 0 deletions src/views/demo/comp/transition/index.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<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>

0 comments on commit 3713487

Please sign in to comment.