Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
球球不吃虾
vue-vben-admin
提交
3713487c
V
vue-vben-admin
项目概览
球球不吃虾
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
3713487c
编写于
10月 25, 2020
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(transition): add transition comp and demo
上级
2628fb55
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
125 addition
and
20 deletion
+125
-20
CHANGELOG.zh_CN.md
CHANGELOG.zh_CN.md
+1
-0
src/components/Transition/index.ts
src/components/Transition/index.ts
+17
-20
src/router/menus/modules/demo/comp.ts
src/router/menus/modules/demo/comp.ts
+4
-0
src/router/routes/modules/demo/comp.ts
src/router/routes/modules/demo/comp.ts
+8
-0
src/views/demo/comp/transition/index.vue
src/views/demo/comp/transition/index.vue
+95
-0
未找到文件。
CHANGELOG.zh_CN.md
浏览文件 @
3713487c
...
...
@@ -6,6 +6,7 @@
-
新增 tinymce 富文本组件
-
表单新增 submitOnReset 控制是否在重置时重新发起请求
-
表格新增
`sortFn`
支持自定义排序
-
新增动画组件及示例
### ✨ Refactor
...
...
src/components/Transition/index.ts
浏览文件 @
3713487c
// 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
'
;
src/router/menus/modules/demo/comp.ts
浏览文件 @
3713487c
...
...
@@ -13,6 +13,10 @@ const menu: MenuModule = {
path
:
'
countTo
'
,
name
:
'
数字动画
'
,
},
{
path
:
'
transition
'
,
name
:
'
动画组件
'
,
},
{
path
:
'
scroll
'
,
...
...
src/router/routes/modules/demo/comp.ts
浏览文件 @
3713487c
...
...
@@ -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
'
,
...
...
src/views/demo/comp/transition/index.vue
0 → 100644
浏览文件 @
3713487c
<
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
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录