forked from opentiny/tiny-vue
perf(transition)： merge transition css to base.less (#851)
* perf(transition): merge transition css to base * perf(transition): merge transition css to base
This commit is contained in:
申君健
GitHub
parent
d1ba721766
commit
d259461ab3
|
|
@ -12,5 +12,6 @@
|
|||
|
||||
@import './reset.less';
|
||||
@import './basic-var.less';
|
||||
@import './transition.less';
|
||||
@import '../error-page/index.less';
|
||||
@import '../svg/index.less';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,119 @@
|
|||
/** 全局的动画，在collapse / picker / tooltip / popover 等组件有用到
|
||||
vue2的动画状态类： v-enter v-enter-to v-leave v-leave-to 以及 v-enter-active, v-leave-active
|
||||
vue3的动画状态类： v-enter-from v-enter-to v-leave-from v-leave-to 以及 v-enter-active, v-leave-active
|
||||
*/
|
||||
|
||||
.fade-in-linear-enter-active,
|
||||
.fade-in-linear-leave-active {
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
|
||||
.fade-in-linear-enter,
|
||||
.fade-in-linear-enter-from,
|
||||
.fade-in-linear-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-in-enter-active,
|
||||
.fade-in-leave-active {
|
||||
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
|
||||
.fade-in-enter,
|
||||
.fade-in-enter-from,
|
||||
.fade-in-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.zoom-in-center-enter-active,
|
||||
.zoom-in-center-leave-active {
|
||||
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
|
||||
.zoom-in-center-enter,
|
||||
.zoom-in-center-enter-from,
|
||||
.zoom-in-center-leave-to {
|
||||
opacity: 0;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
.zoom-in-top-enter-active,
|
||||
.zoom-in-top-leave-active {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
transition:
|
||||
transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
|
||||
opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
transform-origin: center top;
|
||||
}
|
||||
|
||||
.zoom-in-top-enter,
|
||||
.zoom-in-top-enter-from,
|
||||
.zoom-in-top-leave-to {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
.zoom-in-bottom-enter-active,
|
||||
.zoom-in-bottom-leave-active {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
transition:
|
||||
transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
|
||||
opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
.zoom-in-bottom-enter,
|
||||
.zoom-in-bottom-enter-from,
|
||||
.zoom-in-bottom-leave-to {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
.zoom-in-left-enter-active,
|
||||
.zoom-in-left-leave-active {
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
transition:
|
||||
transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
|
||||
opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
.zoom-in-left-enter,
|
||||
.zoom-in-left-enter-from,
|
||||
.zoom-in-left-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.45, 0.45);
|
||||
}
|
||||
|
||||
.list-enter-active,
|
||||
.list-leave-active {
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
.list-enter,
|
||||
.list-enter-from,
|
||||
.list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
|
||||
.opacity-transition {
|
||||
transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
|
||||
.collapse-transition {
|
||||
transition:
|
||||
0.3s height ease-in-out,
|
||||
0.3s padding-top ease-in-out,
|
||||
0.3s padding-bottom ease-in-out;
|
||||
}
|
||||
|
||||
.horizontal-collapse-transition {
|
||||
transition:
|
||||
0.3s width ease-in-out,
|
||||
0.3s padding-left ease-in-out,
|
||||
0.3s padding-right ease-in-out;
|
||||
}
|
||||
|
|
@ -16,134 +16,4 @@
|
|||
|
||||
.@{collapse-prefix-cls} {
|
||||
.component-css-vars-collapse();
|
||||
|
||||
&fade-in-linear-enter-active,
|
||||
&fade-in-linear-leave-active {
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
|
||||
&fade-in-linear-enter,
|
||||
&fade-in-linear-enter-from,
|
||||
&fade-in-linear-leave,
|
||||
&fade-in-linear-leave-from,
|
||||
&fade-in-linear-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&fade-in-enter-active,
|
||||
&fade-in-leave-active {
|
||||
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
|
||||
&fade-in-enter,
|
||||
&fade-in-enter-from,
|
||||
&fade-in-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&zoom-in-center-enter-active,
|
||||
&zoom-in-center-leave-active {
|
||||
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
|
||||
&zoom-in-center-enter,
|
||||
&zoom-in-center-enter-from,
|
||||
&zoom-in-center-leave-active {
|
||||
opacity: 0;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
&zoom-in-top-enter-active,
|
||||
&zoom-in-top-leave-active {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
transition:
|
||||
transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
|
||||
opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
transform-origin: center top;
|
||||
}
|
||||
|
||||
&zoom-in-top-enter,
|
||||
&zoom-in-top-enter-from,
|
||||
&zoom-in-top-leave-active {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
&zoom-in-bottom-enter-active,
|
||||
&zoom-in-bottom-leave-active {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
transition:
|
||||
transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
|
||||
opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
&zoom-in-bottom-enter,
|
||||
&zoom-in-left-enter-from,
|
||||
&zoom-in-bottom-leave-active {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
&zoom-in-left-enter-active,
|
||||
&zoom-in-left-leave-active {
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
transition:
|
||||
transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
|
||||
opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
&zoom-in-left-enter,
|
||||
&zoom-in-left-enter-from,
|
||||
&zoom-in-left-leave-active {
|
||||
opacity: 0;
|
||||
transform: scale(0.45, 0.45);
|
||||
}
|
||||
|
||||
&list-enter-active,
|
||||
&list-leave-active {
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
&list-enter,
|
||||
&list-enter-from,
|
||||
&list-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
|
||||
&opacity-transition {
|
||||
transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-transition {
|
||||
transition:
|
||||
0.3s height ease-in-out,
|
||||
0.3s padding-top ease-in-out,
|
||||
0.3s padding-bottom ease-in-out;
|
||||
}
|
||||
|
||||
.horizontal-collapse-transition {
|
||||
transition:
|
||||
0.3s width ease-in-out,
|
||||
0.3s padding-left ease-in-out,
|
||||
0.3s padding-right ease-in-out;
|
||||
}
|
||||
|
||||
.fade-in-linear-enter,
|
||||
.fade-in-linear-enter-from,
|
||||
.fade-in-linear-leave,
|
||||
.fade-in-linear-leave-from,
|
||||
.fade-in-linear-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-in-linear-enter-active,
|
||||
.fade-in-linear-leave-active {
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -318,135 +318,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{css-prefix} {
|
||||
&fade-in-linear-enter-active,
|
||||
&fade-in-linear-leave-active {
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
|
||||
&fade-in-linear-enter,
|
||||
&fade-in-linear-enter-from,
|
||||
&fade-in-linear-leave,
|
||||
&fade-in-linear-leave-from,
|
||||
&fade-in-linear-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&fade-in-enter-active,
|
||||
&fade-in-leave-active {
|
||||
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
|
||||
&fade-in-enter,
|
||||
&fade-in-enter-from,
|
||||
&fade-in-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&zoom-in-center-enter-active,
|
||||
&zoom-in-center-leave-active {
|
||||
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
|
||||
&zoom-in-center-enter,
|
||||
&zoom-in-center-enter-from,
|
||||
&zoom-in-center-leave-active {
|
||||
opacity: 0;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
&zoom-in-top-enter-active,
|
||||
&zoom-in-top-leave-active {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
transition:
|
||||
transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
|
||||
opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
transform-origin: center top;
|
||||
}
|
||||
|
||||
&zoom-in-top-enter,
|
||||
&zoom-in-top-enter-from,
|
||||
&zoom-in-top-leave-active {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
&zoom-in-bottom-enter-active,
|
||||
&zoom-in-bottom-leave-active {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
transition:
|
||||
transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
|
||||
opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
&zoom-in-bottom-enter,
|
||||
&zoom-in-bottom-enter-from,
|
||||
&zoom-in-bottom-leave-active {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
&zoom-in-left-enter-active,
|
||||
&zoom-in-left-leave-active {
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
transition:
|
||||
transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
|
||||
opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
&zoom-in-left-enter,
|
||||
&zoom-in-left-enter-from,
|
||||
&zoom-in-left-leave-active {
|
||||
opacity: 0;
|
||||
transform: scale(0.45, 0.45);
|
||||
}
|
||||
|
||||
&list-enter-active,
|
||||
&list-leave-active {
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
&list-enter,
|
||||
&list-enter-from,
|
||||
&list-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
|
||||
&opacity-transition {
|
||||
transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-transition {
|
||||
transition:
|
||||
0.3s height ease-in-out,
|
||||
0.3s padding-top ease-in-out,
|
||||
0.3s padding-bottom ease-in-out;
|
||||
}
|
||||
|
||||
.horizontal-collapse-transition {
|
||||
transition:
|
||||
0.3s width ease-in-out,
|
||||
0.3s padding-left ease-in-out,
|
||||
0.3s padding-right ease-in-out;
|
||||
}
|
||||
|
||||
.fade-in-linear-enter,
|
||||
.fade-in-linear-enter-from,
|
||||
.fade-in-linear-leave,
|
||||
.fade-in-linear-leave-from,
|
||||
.fade-in-linear-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-in-linear-enter-active,
|
||||
.fade-in-linear-leave-active {
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -191,29 +191,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{css-prefix} {
|
||||
&fade-in-linear-enter-active,
|
||||
&fade-in-linear-leave-active {
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
|
||||
&fade-in-linear-enter,
|
||||
&fade-in-linear-enter-from,
|
||||
&fade-in-linear-leave,
|
||||
&fade-in-linear-leave-from,
|
||||
&fade-in-linear-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&fade-in-enter-active,
|
||||
&fade-in-leave-active {
|
||||
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
|
||||
&fade-in-enter,
|
||||
&fade-in-enter-from,
|
||||
&fade-in-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue