github_mirrors/vben-admin-thin-next
1
0
Fork 0
mirror of https://github.com/vbenjs/vben-admin-thin-next.git synced 2025-01-23 09:40:22 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(transition): add transition comp and demo

Browse Source
This commit is contained in:
vben 2020-10-25 21:31:14 +08:00
parent 2628fb550d
commit 3713487c85
5 changed files with 125 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.zh_CN.md
View File

@ -6,6 +6,7 @@
- 新增 tinymce 富文本组件
- 表单新增 submitOnReset 控制是否在重置时重新发起请求
- 表格新增`sortFn`支持自定义排序
- 新增动画组件及示例
### ✨ Refactor

37
src/components/Transition/index.ts
View File

@ -1,24 +1,21 @@
// 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 './src/CollapseTransition';
// 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
src/router/menus/modules/demo/comp.ts
View File

@ -13,6 +13,10 @@ const menu: MenuModule = {
path: 'countTo',
name: '数字动画',
},
{
path: 'transition',
name: '动画组件',
},
{
path: 'scroll',

8
src/router/routes/modules/demo/comp.ts
View File

@ -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',

95
src/views/demo/comp/transition/index.vue Normal file
View File

@ -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>