Skip to content

Commit

Permalink
feat: add basic transition
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiaodemen
xiaodemen committed Dec 29, 2021
1 parent f55e5d3 commit 32929e9
Show file tree
Hide file tree
Showing 7 changed files with 318 additions and 24 deletions.
151 changes: 151 additions & 0 deletions packages/veui-theme-dls/components/transition.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
@import "../lib.less";

.@{veui-prefix}-transition {
&-fade-leave-active {
transition-duration: 100ms;
}

&-fade-enter-active {
transition-duration: 200ms;
}

&-fade-leave-active,
&-fade-enter-active {
transition-property: opacity;
opacity: 1;
transition-timing-function: linear;
}

&-fade-leave-to,
&-fade-enter {
opacity: 0;
}

// 放大渐现，缩小渐隐
&-fade-scale-leave-active {
transition-duration: 100ms;
}

&-fade-scale-enter-active {
transition-duration: 200ms;
}

&-fade-scale-leave-active,
&-fade-scale-enter-active {
transition-property: opacity, transform;
opacity: 1;
transform: scale3d(1, 1, 1);
transition-timing-function: linear;
}

&-fade-scale-leave-to,
&-fade-scale-enter {
opacity: 0;
transform: scale3d(0, 0, 1);
}

&-fade-scale-x-leave-active {
transition-duration: 100ms;
}

&-fade-scale-x-enter-active {
transition-duration: 200ms;
}

&-fade-scale-x-leave-active,
&-fade-scale-x-enter-active {
transition-property: opacity, transform;
opacity: 1;
transform: scale3d(1, 1, 1);
transition-timing-function: linear;
}

&-fade-scale-x-leave-to,
&-fade-scale-x-enter {
opacity: 0;
transform: scale3d(0, 1, 1);
}

&-fade-scale-y-leave-active {
transition-duration: 100ms;
}

&-fade-scale-y-enter-active {
transition-duration: 200ms;
}

&-fade-scale-y-leave-active,
&-fade-scale-y-enter-active {
transition-property: opacity, transform;
opacity: 1;
transform: scale3d(1, 1, 1);
transition-timing-function: linear;
}

&-fade-scale-y-leave-to,
&-fade-scale-y-enter {
opacity: 0;
transform: scale3d(1, 0, 1);
}

// 移入
&-translate-leave-active {
transition-duration: 100ms;
transition-timing-function: ease-in;
}

&-translate-enter-active {
transition-duration: 200ms;
transition-timing-function: ease-out;
}

&-translate-leave-active,
&-translate-enter-active {
transition-property: transform;
transform: translate3d(
var(--dls-transition-translate-to-x, 0),
var(--dls-transition-translate-to-y, 0),
0
);
}

&-translate-leave-to,
&-translate-enter {
transform: translate3d(
var(--dls-transition-translate-from-x, 0),
var(--dls-transition-translate-from-y, 0),
0
);
}

&-fade-translate-scale-leave-active {
transition-duration: 100ms;
}

&-fade-translate-scale-enter-active {
transition-duration: 200ms;
}

&-fade-translate-scale-leave-active,
&-fade-translate-scale-enter-active {
transition-property: opacity, transform;
opacity: 1;
transform: translate3d(
var(--dls-transition-translate-to-x, 0),
var(--dls-transition-translate-to-y, 0),
0
)
scale3d(1, 1, 1);
}

&-fade-translate-scale-leave-to,
&-fade-translate-scale-enter {
opacity: 0;
transform: translate3d(
var(--dls-transition-translate-from-x, 0),
var(--dls-transition-translate-from-y, 0),
0
)
scale3d(0, 0, 1);
}
}
15 changes: 8 additions & 7 deletions packages/veui-theme-dls/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
// This file is generated automatically by `npm run theme`
import './components/Collapse'
import './components/Accordion'
import './components/Loading'
import './components/Button'
Expand All @@ -21,15 +22,15 @@ import './components/Carousel'
import './components/CascaderPane'
import './components/Tag'
import './components/Cascader'
import './components/Tooltip'
import './components/Popover'
import './components/CheckButtonGroup'
import './components/Radio'
import './components/CheckboxGroup'
import './components/Collapse'
import './components/DatePicker'
import './components/InputGroup'
import './components/SearchBox'
import './components/Dropdown'
import './components/Tooltip'
import './components/Field'
import './components/Fieldset'
import './components/FilterPanel'
Expand All @@ -41,7 +42,6 @@ import './components/Nav'
import './components/NumberInput'
import './components/Select'
import './components/Pagination'
import './components/Popover'
import './components/Progress'
import './components/RadioButtonGroup'
import './components/RadioGroup'
Expand All @@ -58,8 +58,9 @@ import './components/Transfer'
import './components/Uploader'

import './common.less'
import './components/accordion.less'
import './components/icon.less'
import './components/collapse.less'
import './components/accordion.less'
import './components/loading.less'
import './components/button.less'
import './components/alert.less'
Expand All @@ -83,18 +84,18 @@ import './components/carousel.less'
import './components/cascader-pane.less'
import './components/tag.less'
import './components/cascader.less'
import './components/tooltip.less'
import './components/popover.less'
import './components/check-button-group.less'
import './components/radio.less'
import './components/checkbox-group.less'
import './components/collapse.less'
import './components/confirm-box.less'
import './components/date-picker.less'
import './components/drawer.less'
import './components/input-group.less'
import './components/search-box.less'
import './components/dropdown.less'
import './components/embedded.less'
import './components/tooltip.less'
import './components/field.less'
import './components/fieldset.less'
import './components/filter-panel.less'
Expand All @@ -108,7 +109,6 @@ import './components/nav.less'
import './components/number-input.less'
import './components/select.less'
import './components/pagination.less'
import './components/popover.less'
import './components/progress.less'
import './components/prompt-box.less'
import './components/radio-button-group.less'
Expand All @@ -125,4 +125,5 @@ import './components/time-picker.less'
import './components/toast.less'
import './components/toast-list.less'
import './components/transfer.less'
import './components/transition.less'
import './components/uploader.less'
42 changes: 25 additions & 17 deletions packages/veui/components.json
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,20 @@
[
{
"name": "Accordion",
"path": "Accordion.vue"
"name": "mixin",
"path": "Carousel/mixin.js"
},
{
"name": "Icon",
"path": "Icon.vue"
},
{
"name": "Collapse",
"path": "Collapse.vue"
},
{
"name": "Accordion",
"path": "Accordion.vue"
},
{
"name": "Loading",
"path": "Loading.vue"
Expand Down Expand Up @@ -143,6 +151,14 @@
"name": "Cascader",
"path": "Cascader/index.js"
},
{
"name": "Tooltip",
"path": "Tooltip.vue"
},
{
"name": "Popover",
"path": "Popover.vue"
},
{
"name": "CheckButtonGroup",
"path": "CheckButtonGroup.vue"
Expand All @@ -155,10 +171,6 @@
"name": "CheckboxGroup",
"path": "CheckboxGroup.vue"
},
{
"name": "Collapse",
"path": "Collapse.vue"
},
{
"name": "Column",
"path": "Column.js"
Expand Down Expand Up @@ -203,10 +215,6 @@
"name": "Label",
"path": "Label.vue"
},
{
"name": "Tooltip",
"path": "Tooltip.vue"
},
{
"name": "Field",
"path": "Field.js"
Expand All @@ -229,15 +237,15 @@
},
{
"name": "Form",
"path": "Form/Form.vue"
"path": "Form"
},
{
"name": "Form",
"path": "Form"
"path": "Form/index.js"
},
{
"name": "Form",
"path": "Form/index.js"
"path": "Form/Form.vue"
},
{
"name": "GridColumn",
Expand Down Expand Up @@ -303,10 +311,6 @@
"name": "Pagination",
"path": "Pagination.vue"
},
{
"name": "Popover",
"path": "Popover.vue"
},
{
"name": "Progress",
"path": "Progress.vue"
Expand Down Expand Up @@ -415,6 +419,10 @@
"name": "Transfer",
"path": "Transfer/index.js"
},
{
"name": "Transition",
"path": "Transition.vue"
},
{
"name": "Uploader",
"path": "Uploader/Uploader.vue"
Expand Down
Loading

0 comments on commit 32929e9

Please sign in to comment.