diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 9f575c1ebea..b8bd159c123 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -6,6 +6,7 @@ - 新增 tinymce 富文本组件 - 表单新增 submitOnReset 控制是否在重置时重新发起请求 - 表格新增`sortFn`支持自定义排序 +- 新增动画组件及示例 ### ✨ Refactor diff --git a/src/components/Transition/index.ts b/src/components/Transition/index.ts index a184a9ddd6d..9f8e47b402b 100644 --- a/src/components/Transition/index.ts +++ b/src/components/Transition/index.ts @@ -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'; diff --git a/src/router/menus/modules/demo/comp.ts b/src/router/menus/modules/demo/comp.ts index b8b47a73a22..f86bded03b2 100644 --- a/src/router/menus/modules/demo/comp.ts +++ b/src/router/menus/modules/demo/comp.ts @@ -13,6 +13,10 @@ const menu: MenuModule = { path: 'countTo', name: '数字动画', }, + { + path: 'transition', + name: '动画组件', + }, { path: 'scroll', diff --git a/src/router/routes/modules/demo/comp.ts b/src/router/routes/modules/demo/comp.ts index dc7c687e57b..cf1ad442233 100644 --- a/src/router/routes/modules/demo/comp.ts +++ b/src/router/routes/modules/demo/comp.ts @@ -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', diff --git a/src/views/demo/comp/transition/index.vue b/src/views/demo/comp/transition/index.vue new file mode 100644 index 00000000000..f382e9b3789 --- /dev/null +++ b/src/views/demo/comp/transition/index.vue @@ -0,0 +1,95 @@ + + +