Skip to content

Commit 32929e9

Browse files
xiaodemenxiaodemen
committed
feat: add basic transition
1 parent f55e5d3 commit 32929e9

7 files changed

Lines changed: 318 additions & 24 deletions

File tree

‎packages/veui-theme-dls/components/transition.less‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
@import "../lib.less";
2+
3+
.@{veui-prefix}-transition {
4+
&-fade-leave-active {
5+
transition-duration: 100ms;
6+
}
7+
8+
&-fade-enter-active {
9+
transition-duration: 200ms;
10+
}
11+
12+
&-fade-leave-active,
13+
&-fade-enter-active {
14+
transition-property: opacity;
15+
opacity: 1;
16+
transition-timing-function: linear;
17+
}
18+
19+
&-fade-leave-to,
20+
&-fade-enter {
21+
opacity: 0;
22+
}
23+
24+
// 放大渐现，缩小渐隐
25+
&-fade-scale-leave-active {
26+
transition-duration: 100ms;
27+
}
28+
29+
&-fade-scale-enter-active {
30+
transition-duration: 200ms;
31+
}
32+
33+
&-fade-scale-leave-active,
34+
&-fade-scale-enter-active {
35+
transition-property: opacity, transform;
36+
opacity: 1;
37+
transform: scale3d(1, 1, 1);
38+
transition-timing-function: linear;
39+
}
40+
41+
&-fade-scale-leave-to,
42+
&-fade-scale-enter {
43+
opacity: 0;
44+
transform: scale3d(0, 0, 1);
45+
}
46+
47+
&-fade-scale-x-leave-active {
48+
transition-duration: 100ms;
49+
}
50+
51+
&-fade-scale-x-enter-active {
52+
transition-duration: 200ms;
53+
}
54+
55+
&-fade-scale-x-leave-active,
56+
&-fade-scale-x-enter-active {
57+
transition-property: opacity, transform;
58+
opacity: 1;
59+
transform: scale3d(1, 1, 1);
60+
transition-timing-function: linear;
61+
}
62+
63+
&-fade-scale-x-leave-to,
64+
&-fade-scale-x-enter {
65+
opacity: 0;
66+
transform: scale3d(0, 1, 1);
67+
}
68+
69+
&-fade-scale-y-leave-active {
70+
transition-duration: 100ms;
71+
}
72+
73+
&-fade-scale-y-enter-active {
74+
transition-duration: 200ms;
75+
}
76+
77+
&-fade-scale-y-leave-active,
78+
&-fade-scale-y-enter-active {
79+
transition-property: opacity, transform;
80+
opacity: 1;
81+
transform: scale3d(1, 1, 1);
82+
transition-timing-function: linear;
83+
}
84+
85+
&-fade-scale-y-leave-to,
86+
&-fade-scale-y-enter {
87+
opacity: 0;
88+
transform: scale3d(1, 0, 1);
89+
}
90+
91+
// 移入
92+
&-translate-leave-active {
93+
transition-duration: 100ms;
94+
transition-timing-function: ease-in;
95+
}
96+
97+
&-translate-enter-active {
98+
transition-duration: 200ms;
99+
transition-timing-function: ease-out;
100+
}
101+
102+
&-translate-leave-active,
103+
&-translate-enter-active {
104+
transition-property: transform;
105+
transform: translate3d(
106+
var(--dls-transition-translate-to-x, 0),
107+
var(--dls-transition-translate-to-y, 0),
108+
0
109+
);
110+
}
111+
112+
&-translate-leave-to,
113+
&-translate-enter {
114+
transform: translate3d(
115+
var(--dls-transition-translate-from-x, 0),
116+
var(--dls-transition-translate-from-y, 0),
117+
0
118+
);
119+
}
120+
121+
&-fade-translate-scale-leave-active {
122+
transition-duration: 100ms;
123+
}
124+
125+
&-fade-translate-scale-enter-active {
126+
transition-duration: 200ms;
127+
}
128+
129+
&-fade-translate-scale-leave-active,
130+
&-fade-translate-scale-enter-active {
131+
transition-property: opacity, transform;
132+
opacity: 1;
133+
transform: translate3d(
134+
var(--dls-transition-translate-to-x, 0),
135+
var(--dls-transition-translate-to-y, 0),
136+
0
137+
)
138+
scale3d(1, 1, 1);
139+
}
140+
141+
&-fade-translate-scale-leave-to,
142+
&-fade-translate-scale-enter {
143+
opacity: 0;
144+
transform: translate3d(
145+
var(--dls-transition-translate-from-x, 0),
146+
var(--dls-transition-translate-from-y, 0),
147+
0
148+
)
149+
scale3d(0, 0, 1);
150+
}
151+
}

‎packages/veui-theme-dls/index.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
// This file is generated automatically by `npm run theme`
2+
import './components/Collapse'
23
import './components/Accordion'
34
import './components/Loading'
45
import './components/Button'
@@ -21,15 +22,15 @@ import './components/Carousel'
2122
import './components/CascaderPane'
2223
import './components/Tag'
2324
import './components/Cascader'
25+
import './components/Tooltip'
26+
import './components/Popover'
2427
import './components/CheckButtonGroup'
2528
import './components/Radio'
2629
import './components/CheckboxGroup'
27-
import './components/Collapse'
2830
import './components/DatePicker'
2931
import './components/InputGroup'
3032
import './components/SearchBox'
3133
import './components/Dropdown'
32-
import './components/Tooltip'
3334
import './components/Field'
3435
import './components/Fieldset'
3536
import './components/FilterPanel'
@@ -41,7 +42,6 @@ import './components/Nav'
4142
import './components/NumberInput'
4243
import './components/Select'
4344
import './components/Pagination'
44-
import './components/Popover'
4545
import './components/Progress'
4646
import './components/RadioButtonGroup'
4747
import './components/RadioGroup'
@@ -58,8 +58,9 @@ import './components/Transfer'
5858
import './components/Uploader'
5959

6060
import './common.less'
61-
import './components/accordion.less'
6261
import './components/icon.less'
62+
import './components/collapse.less'
63+
import './components/accordion.less'
6364
import './components/loading.less'
6465
import './components/button.less'
6566
import './components/alert.less'
@@ -83,18 +84,18 @@ import './components/carousel.less'
8384
import './components/cascader-pane.less'
8485
import './components/tag.less'
8586
import './components/cascader.less'
87+
import './components/tooltip.less'
88+
import './components/popover.less'
8689
import './components/check-button-group.less'
8790
import './components/radio.less'
8891
import './components/checkbox-group.less'
89-
import './components/collapse.less'
9092
import './components/confirm-box.less'
9193
import './components/date-picker.less'
9294
import './components/drawer.less'
9395
import './components/input-group.less'
9496
import './components/search-box.less'
9597
import './components/dropdown.less'
9698
import './components/embedded.less'
97-
import './components/tooltip.less'
9899
import './components/field.less'
99100
import './components/fieldset.less'
100101
import './components/filter-panel.less'
@@ -108,7 +109,6 @@ import './components/nav.less'
108109
import './components/number-input.less'
109110
import './components/select.less'
110111
import './components/pagination.less'
111-
import './components/popover.less'
112112
import './components/progress.less'
113113
import './components/prompt-box.less'
114114
import './components/radio-button-group.less'
@@ -125,4 +125,5 @@ import './components/time-picker.less'
125125
import './components/toast.less'
126126
import './components/toast-list.less'
127127
import './components/transfer.less'
128+
import './components/transition.less'
128129
import './components/uploader.less'

‎packages/veui/components.json‎

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
[
22
{
3-
"name": "Accordion",
4-
"path": "Accordion.vue"
3+
"name": "mixin",
4+
"path": "Carousel/mixin.js"
55
},
66
{
77
"name": "Icon",
88
"path": "Icon.vue"
99
},
10+
{
11+
"name": "Collapse",
12+
"path": "Collapse.vue"
13+
},
14+
{
15+
"name": "Accordion",
16+
"path": "Accordion.vue"
17+
},
1018
{
1119
"name": "Loading",
1220
"path": "Loading.vue"
@@ -143,6 +151,14 @@
143151
"name": "Cascader",
144152
"path": "Cascader/index.js"
145153
},
154+
{
155+
"name": "Tooltip",
156+
"path": "Tooltip.vue"
157+
},
158+
{
159+
"name": "Popover",
160+
"path": "Popover.vue"
161+
},
146162
{
147163
"name": "CheckButtonGroup",
148164
"path": "CheckButtonGroup.vue"
@@ -155,10 +171,6 @@
155171
"name": "CheckboxGroup",
156172
"path": "CheckboxGroup.vue"
157173
},
158-
{
159-
"name": "Collapse",
160-
"path": "Collapse.vue"
161-
},
162174
{
163175
"name": "Column",
164176
"path": "Column.js"
@@ -203,10 +215,6 @@
203215
"name": "Label",
204216
"path": "Label.vue"
205217
},
206-
{
207-
"name": "Tooltip",
208-
"path": "Tooltip.vue"
209-
},
210218
{
211219
"name": "Field",
212220
"path": "Field.js"
@@ -229,15 +237,15 @@
229237
},
230238
{
231239
"name": "Form",
232-
"path": "Form/Form.vue"
240+
"path": "Form"
233241
},
234242
{
235243
"name": "Form",
236-
"path": "Form"
244+
"path": "Form/index.js"
237245
},
238246
{
239247
"name": "Form",
240-
"path": "Form/index.js"
248+
"path": "Form/Form.vue"
241249
},
242250
{
243251
"name": "GridColumn",
@@ -303,10 +311,6 @@
303311
"name": "Pagination",
304312
"path": "Pagination.vue"
305313
},
306-
{
307-
"name": "Popover",
308-
"path": "Popover.vue"
309-
},
310314
{
311315
"name": "Progress",
312316
"path": "Progress.vue"
@@ -415,6 +419,10 @@
415419
"name": "Transfer",
416420
"path": "Transfer/index.js"
417421
},
422+
{
423+
"name": "Transition",
424+
"path": "Transition.vue"
425+
},
418426
{
419427
"name": "Uploader",
420428
"path": "Uploader/Uploader.vue"

0 commit comments

Comments
 (0)