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

package/theme-chalk/transition/index.scss

@@ -0,0 +1,756 @@
+@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);
+}