@qsxy/element-plus-react 1.0.0-next.11 → 1.0.0-next.13

package/dist/theme-chalk/transition/index.scss

@@ -1,756 +0,0 @@
-@use '../common/var';
-
-// layuid动画，右侧滑入
-@keyframes rl {
-    from {
-        transform: translate3d(100%, 0, 0);
-    }
-    to {
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-// layuid动画，左侧滑出
-@keyframes lr {
-    from {
-        transform: translate3d(0, 0, 0);
-        opacity: 1;
-    }
-    to {
-        transform: translate3d(100%, 0, 0);
-        opacity: 1;
-    }
-}
-
-.#{$namespace}-anim-rl {
-    animation-name: rl;
-}
-
-.#{$namespace}-anim-lr,
-.#{$namespace}-anim-rl.layer-anim-close {
-    animation-name: lr;
-}
-
-.#{$namespace}-anim {
-    animation-duration: 0.3s;
-    animation-fill-mode: both;
-}
-
-@keyframes rCheckboxEffect {
-    0% {
-        opacity: 0.5;
-        transform: scale(1);
-    }
-    to {
-        opacity: 0;
-        transform: scale(1.6);
-    }
-}
-
-@keyframes rLayoutSiderOpen {
-    0% {
-        width: 80px;
-    }
-    100% {
-        width: 200px;
-    }
-}
-
-@keyframes rLayoutSiderCollapsed {
-    0% {
-        width: 200px;
-    }
-    100% {
-        width: 80px;
-    }
-}
-
-@keyframes rNoticeShake {
-    5%,
-    25%,
-    45% {
-        transform: rotate(8deg);
-    }
-    0%,
-    10%,
-    30%,
-    50% {
-        transform: rotate(-8deg);
-    }
-    15%,
-    35%,
-    55% {
-        transform: rotate(4deg);
-    }
-    20%,
-    40%,
-    60% {
-        transform: rotate(-4deg);
-    }
-    65%,
-    100% {
-        transform: rotate(0deg);
-    }
-}
-
-.rNoticeShake {
-    transform-origin: 50% 0;
-    animation: rNoticeShake 3s infinite ease;
-}
-
-@keyframes rSlideUpIn {
-    0% {
-        transform: scaleY(0.8);
-        transform-origin: 0 0;
-        opacity: 0;
-    }
-    to {
-        transform: scaleY(1);
-        transform-origin: 0 0;
-        opacity: 1;
-    }
-}
-
-@keyframes rSlideUpOut {
-    0% {
-        transform: scaleY(1);
-        transform-origin: 0 0;
-        opacity: 1;
-    }
-    to {
-        transform: scaleY(0.8);
-        transform-origin: 0 0;
-        opacity: 0;
-    }
-}
-
-.#{$namespace}-slide-up-enter-active,
-.#{$namespace}-slide-up-leave-active {
-    animation-duration: 0.2s;
-    animation-fill-mode: both;
-    animation-play-state: paused;
-}
-
-.#{$namespace}-slide-up-enter-from {
-    opacity: 0;
-    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-}
-
-.#{$namespace}-slide-up-enter-active {
-    animation-name: rSlideUpIn;
-    animation-play-state: running;
-}
-
-.#{$namespace}-slide-up-leave-active {
-    animation-name: rSlideUpOut;
-    animation-play-state: running;
-    pointer-events: none;
-}
-
-.#{$namespace}-slide-up-leave-to {
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-}
-
-@keyframes rSlideDownIn {
-    0% {
-        transform: scaleY(0.8);
-        transform-origin: 100% 100%;
-        opacity: 0;
-    }
-    to {
-        transform: scaleY(1);
-        transform-origin: 100% 100%;
-        opacity: 1;
-    }
-}
-
-@keyframes rSlideDownOut {
-    0% {
-        transform: scaleY(1);
-        transform-origin: 100% 100%;
-        opacity: 1;
-    }
-    to {
-        transform: scaleY(0.8);
-        transform-origin: 100% 100%;
-        opacity: 0;
-    }
-}
-
-.#{$namespace}-slide-down-enter-active,
-.#{$namespace}-slide-down-leave-active {
-    animation-duration: 0.2s;
-    animation-fill-mode: both;
-    animation-play-state: paused;
-}
-
-.#{$namespace}-slide-down-enter-from {
-    opacity: 0;
-    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-}
-
-.#{$namespace}-slide-down-enter-active {
-    animation-name: rSlideDownIn;
-    animation-play-state: running;
-}
-
-.#{$namespace}-slide-down-leave-active {
-    animation-name: rSlideDownOut;
-    animation-play-state: running;
-    pointer-events: none;
-}
-
-.#{$namespace}-slide-down-leave-to {
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-}
-
-@keyframes rSlideLeftIn {
-    0% {
-        transform: scaleX(0.8);
-        transform-origin: 0 0;
-        opacity: 0;
-    }
-    to {
-        transform: scaleX(1);
-        transform-origin: 0 0;
-        opacity: 1;
-    }
-}
-
-@keyframes rSlideLeftOut {
-    0% {
-        transform: scaleX(1);
-        transform-origin: 0 0;
-        opacity: 1;
-    }
-    to {
-        transform: scaleX(0.8);
-        transform-origin: 0 0;
-        opacity: 0;
-    }
-}
-
-.#{$namespace}-slide-left-enter-active,
-.#{$namespace}-slide-left-leave-active {
-    animation-duration: 0.2s;
-    animation-fill-mode: both;
-    animation-play-state: paused;
-}
-
-.#{$namespace}-slide-left-enter-active {
-    animation-name: rSlideLeftIn;
-    animation-play-state: running;
-}
-
-.#{$namespace}-slide-left-leave-active {
-    animation-name: rSlideLeftOut;
-    animation-play-state: running;
-    pointer-events: none;
-}
-
-.#{$namespace}-slide-left-enter-from {
-    opacity: 0;
-    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-}
-
-.#{$namespace}-slide-left-leave-to {
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-}
-
-@keyframes rSlideRightIn {
-    0% {
-        transform: scaleX(0.8);
-        transform-origin: 100% 0;
-        opacity: 0;
-    }
-    to {
-        transform: scaleX(1);
-        transform-origin: 100% 0;
-        opacity: 1;
-    }
-}
-
-@keyframes rSlideRightOut {
-    0% {
-        transform: scaleX(1);
-        transform-origin: 100% 0;
-        opacity: 1;
-    }
-    to {
-        transform: scaleX(0.8);
-        transform-origin: 100% 0;
-        opacity: 0;
-    }
-}
-
-.#{$namespace}-slide-right-enter-active,
-.#{$namespace}-slide-right-leave-active {
-    animation-duration: 0.2s;
-    animation-fill-mode: both;
-    animation-play-state: paused;
-}
-
-.#{$namespace}-slide-right-enter-active {
-    animation-name: rSlideRightIn;
-    animation-play-state: running;
-}
-
-.#{$namespace}-slide-right-leave-active {
-    animation-name: rSlideRightOut;
-    animation-play-state: running;
-    pointer-events: none;
-}
-
-.#{$namespace}-slide-right-enter-from {
-    opacity: 0;
-    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-}
-
-.#{$namespace}-slide-right-leave-to {
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-}
-
-@keyframes rZoomBigIn {
-    0% {
-        transform: scale(0.8);
-        opacity: 0;
-    }
-    to {
-        transform: scale(1);
-        opacity: 1;
-    }
-}
-
-@keyframes rZoomBigOut {
-    0% {
-        transform: scale(1);
-    }
-    to {
-        transform: scale(0.8);
-        opacity: 0;
-    }
-}
-
-.#{$namespace}-zoom-big-enter-active,
-.#{$namespace}-zoom-big-leave-active {
-    animation-duration: 0.2s;
-    animation-fill-mode: both;
-    animation-play-state: paused;
-}
-
-.#{$namespace}-zoom-big-enter-from {
-    transform: scale(0);
-    opacity: 0;
-    animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
-}
-
-.#{$namespace}-zoom-big-enter-active {
-    animation-name: rZoomBigIn;
-    animation-play-state: running;
-}
-
-.#{$namespace}-zoom-big-leave-active {
-    animation-name: rZoomBigOut;
-    animation-play-state: running;
-    pointer-events: none;
-}
-
-// Bounce
-.#{$namespace}-anim-bounce-in {
-    animation-name: rBounceIn;
-    animation-duration: 0.3s;
-    animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
-    animation-fill-mode: forwards;
-
-    @keyframes rBounceIn {
-        from {
-            opacity: 0;
-            transform: scale(0.8);
-        }
-
-        to {
-            opacity: 1;
-            transform: scale(1);
-        }
-    }
-}
-
-.#{$namespace}-anim-bounce-out {
-    // animation-name: rBounceOut;
-    animation-duration: 0.3s;
-    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
-    // animation-fill-mode: forwards;
-
-    @keyframes rBounceOut {
-        from {
-            opacity: 1;
-            transform: scale(1);
-        }
-
-        to {
-            opacity: 0;
-            transform: scale(0.8);
-        }
-    }
-}
-
-@keyframes v {
-    0% {
-        opacity: 0;
-        -webkit-transform: translate3d(100%, 0, 0);
-        transform: translate3d(100%, 0, 0);
-    }
-
-    to {
-        opacity: 1;
-        -webkit-transform: none;
-        transform: none;
-    }
-}
-
-@keyframes c {
-    0% {
-        opacity: 1;
-        -webkit-transform: none;
-        transform: none;
-    }
-
-    to {
-        opacity: 0;
-        -webkit-transform: translate3d(100%, 0, 0);
-        transform: translate3d(100%, 0, 0);
-    }
-}
-
-@keyframes u {
-    0% {
-        opacity: 0;
-        -webkit-transform: translate3d(-100%, 0, 0);
-        transform: translate3d(-100%, 0, 0);
-    }
-
-    to {
-        opacity: 1;
-        -webkit-transform: none;
-        transform: none;
-    }
-}
-
-@keyframes b {
-    0% {
-        opacity: 1;
-        -webkit-transform: none;
-        transform: none;
-    }
-
-    to {
-        opacity: 0;
-        -webkit-transform: translate3d(-100%, 0, 0);
-        transform: translate3d(-100%, 0, 0);
-    }
-}
-
-@keyframes d {
-    0% {
-        opacity: 0;
-        -webkit-transform: translate3d(0, -100%, 0);
-        transform: translate3d(0, -100%, 0);
-    }
-
-    to {
-        opacity: 1;
-        -webkit-transform: none;
-        transform: none;
-    }
-}
-
-@keyframes e {
-    0% {
-        opacity: 1;
-        -webkit-transform: none;
-        transform: none;
-    }
-
-    to {
-        opacity: 0;
-        -webkit-transform: translate3d(0, -100%, 0);
-        transform: translate3d(0, -100%, 0);
-    }
-}
-
-@keyframes f {
-    0% {
-        opacity: 0;
-        -webkit-transform: translate3d(0, 100%, 0);
-        transform: translate3d(0, 100%, 0);
-    }
-
-    to {
-        opacity: 1;
-        -webkit-transform: none;
-        transform: none;
-    }
-}
-
-@keyframes g {
-    0% {
-        opacity: 1;
-        -webkit-transform: none;
-        transform: none;
-    }
-
-    to {
-        opacity: 0;
-        -webkit-transform: translate3d(0, 100%, 0);
-        transform: translate3d(0, 100%, 0);
-    }
-}
-
-.#{$namespace}-anim-slide-out {
-    -webkit-animation-duration: 0.3s;
-    animation-duration: 0.3s;
-    -webkit-animation-fill-mode: forwards;
-    animation-fill-mode: forwards;
-    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
-    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
-}
-
-.#{$namespace}-anim-slide-in {
-    -webkit-animation-duration: 0.3s;
-    animation-duration: 0.3s;
-    -webkit-animation-fill-mode: forwards;
-    animation-fill-mode: forwards;
-    -webkit-animation-timing-function: ease-in-out;
-    animation-timing-function: ease-in-out;
-}
-
-.#{$namespace}-anim-right.#{$namespace}-anim-slide-in {
-    -webkit-animation-name: v;
-    animation-name: v;
-}
-
-.#{$namespace}-anim-right.#{$namespace}-anim-slide-out {
-    -webkit-animation-name: c;
-    animation-name: c;
-}
-
-.#{$namespace}-anim-left.#{$namespace}-anim-slide-in {
-    -webkit-animation-name: u;
-    animation-name: u;
-}
-
-.#{$namespace}-anim-left.#{$namespace}-anim-slide-out {
-    -webkit-animation-name: b;
-    animation-name: b;
-}
-
-.#{$namespace}-anim-top.#{$namespace}-anim-slide-in {
-    -webkit-animation-name: d;
-    animation-name: d;
-}
-
-.#{$namespace}-anim-top.#{$namespace}-anim-slide-out {
-    -webkit-animation-name: e;
-    animation-name: e;
-}
-
-.#{$namespace}-anim-bottom.#{$namespace}-anim-slide-in {
-    -webkit-animation-name: f;
-    animation-name: f;
-}
-
-.#{$namespace}-anim-bottom.#{$namespace}-anim-slide-out {
-    -webkit-animation-name: g;
-    animation-name: g;
-}
-
-.#{$namespace}-anim-bounce-in {
-    -webkit-animation-duration: 0.3s;
-    animation-duration: 0.3s;
-    -webkit-animation-fill-mode: forwards;
-    animation-fill-mode: forwards;
-    -webkit-animation-name: h;
-    animation-name: h;
-    -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
-    animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
-}
-
-@keyframes rShakeHead {
-    0%,
-    100% {
-        transform: translate3d(0, 0, 0);
-    }
-
-    25%,
-    75% {
-        transform: translate3d(-10px, 0, 0);
-    }
-
-    50% {
-        transform: translate3d(10px, 0, 0);
-    }
-}
-
-.#{$namespace}-anim-bounce-in {
-    -webkit-animation-duration: 0.3s;
-    animation-duration: 0.3s;
-    -webkit-animation-fill-mode: forwards;
-    animation-fill-mode: forwards;
-    -webkit-animation-name: h;
-    animation-name: h;
-    -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
-    animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
-}
-
-@mixin animation-common($timing) {
-    animation-duration: 0.3s;
-    animation-timing-function: $timing;
-    animation-fill-mode: forwards;
-}
-
-.#{$namespace}-anim-bounce-in {
-    animation-name: rBounceIn;
-    @include animation-common(cubic-bezier(0.68, -0.55, 0.27, 1.55)); // Ease in out
-
-    @keyframes rBounceIn {
-        from {
-            opacity: 0;
-            transform: scale(0.8);
-        }
-
-        to {
-            opacity: 1;
-            transform: scale(1);
-        }
-    }
-}
-
-.#{$namespace}-anim-bounce-out {
-    animation-name: rBounceOut;
-    @include animation-common(cubic-bezier(0.4, 0, 1, 1)); //Fast out
-
-    @keyframes rBounceOut {
-        from {
-            opacity: 1;
-            transform: scale(1);
-        }
-
-        to {
-            opacity: 0;
-            transform: scale(0.8);
-        }
-    }
-}
-
-.#{$namespace}-anim-fade {
-    opacity: 0;
-    transition: opacity 0.15s linear;
-    pointer-events: none;
-
-    &.#{$namespace}-anim-in {
-        opacity: 1;
-        pointer-events: unset;
-    }
-}
-
-.collapse-transition {
-    overflow: hidden;
-    transition: height 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
-}
-
-.#{$namespace}-menu-collapse-enter-active,
-.#{$namespace}-menu-collapse-leave-active {
-    animation-duration: 0.3s;
-    animation-fill-mode: both;
-    animation-play-state: paused;
-}
-
-.#{$namespace}-menu-collapse-enter-from {
-    // opacity: 0;
-    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-    animation-name: rSlideUpIn;
-    animation-play-state: running;
-}
-
-// .#{$namespace}-menu-collapse-enter-active {
-//     animation-name: rSlideUpIn;
-//     animation-play-state: running;
-// }
-
-.#{$namespace}-menu-collapse-leave-active {
-    animation-name: treeNodeLeave;
-    animation-play-state: running;
-    pointer-events: none;
-}
-
-.#{$namespace}-menu-collapse-leave-to {
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-}
-
-.#{$namespace}-list-enter-active,
-.#{$namespace}-list-leave-active {
-    transition: all 1s;
-}
-
-.#{$namespace}-list-enter-from,
-.#{$namespace}-list-leave-to {
-    opacity: 0;
-    transform: translateY(-30px);
-}
-
-.#{$namespace}-list-leave-active {
-    position: absolute !important;
-}
-
-.#{$namespace}-zoom-in-center-enter-active,
-.#{$namespace}-zoom-in-center-leave-active {
-    transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
-}
-.#{$namespace}-zoom-in-center-enter-from,
-.#{$namespace}-zoom-in-center-leave-active {
-    opacity: 0;
-    transform: scaleX(0);
-}
-
-.#{$namespace}-zoom-in-top-enter-active,
-.#{$namespace}-zoom-in-top-leave-active {
-    opacity: 1;
-    transform: scaleY(1);
-    transition: 0.3s;
-    transform-origin: center top;
-
-    &[data-popper-placement^='top'] {
-        transform-origin: center bottom;
-    }
-}
-.#{$namespace}-zoom-in-top-enter-from,
-.#{$namespace}-zoom-in-top-leave-active {
-    opacity: 0;
-    transform: scaleY(0);
-}
-
-.#{$namespace}-zoom-in-bottom-enter-active,
-.#{$namespace}-zoom-in-bottom-leave-active {
-    opacity: 1;
-    transform: scaleY(1);
-    transition: 0.3s;
-    transform-origin: center bottom;
-}
-.#{$namespace}-zoom-in-bottom-enter-from,
-.#{$namespace}-zoom-in-bottom-leave-active {
-    opacity: 0;
-    transform: scaleY(0);
-}
-
-.#{$namespace}-zoom-in-left-enter-active,
-.#{$namespace}-zoom-in-left-leave-active {
-    opacity: 1;
-    transform: scale(1, 1);
-    transition: 0.3s;
-    transform-origin: top left;
-}
-.#{$namespace}-zoom-in-left-enter-from,
-.#{$namespace}-zoom-in-left-leave-active {
-    opacity: 0;
-    transform: scale(0.45, 0.45);
-}