Pull request #2381: 无JIRA任务 chore: update

Merge in VISUAL/fineui from ~GUY/fineui:master to master * commit '89b595ac4038333684f91a961fabe9eebff139d5': ad d 动画动画 update chore: update
3 years ago · 959aa1e283
12 changed files with 656 additions and 64 deletions
--- a/src/case/combo/bubblecombo/popup.bubble.js
+++ b/src/case/combo/bubblecombo/popup.bubble.js
@ -8,12 +8,12 @@ BI.BubblePopupView = BI.inherit(BI.PopupView, {
    _defaultConfig: function () {
        var config = BI.BubblePopupView.superclass._defaultConfig.apply(this, arguments);
        return BI.extend(config, {
-            baseCls: config.baseCls + " bi-bubble-popup-view",
+            baseCls: config.baseCls + " bi-bubble-popup-view bi-zoom-big-enter bi-zoom-big-enter-active",
            minWidth: 220,
            maxWidth: 300,
            minHeight: 90
        });
-    }
+    },
 });

 BI.shortcut("bi.bubble_popup_view", BI.BubblePopupView);
@ -155,7 +155,7 @@ BI.TextBubblePopupBarView = BI.inherit(BI.Widget, {

    populate: function (v) {
        this.text.setText(v || this.options.text);
-    }
+    },
 });
 BI.TextBubblePopupBarView.EVENT_CHANGE = "EVENT_CLICK_TOOLBAR_BUTTON";
 BI.shortcut("bi.text_bubble_bar_popup_view", BI.TextBubblePopupBarView);
--- a/src/less/base/combo/combo.bubble.less
+++ b/src/less/base/combo/combo.bubble.less
@ -32,68 +32,16 @@
  }
 }

-.bi-popup-view[data-popper-placement^='top'] {
-  > .bi-bubble-arrow {
-    bottom: -10px;
-    > .bubble-arrow {
-      bottom: 6px;
-    }
-  }
-}
-.bi-popup-view[data-popper-placement^='bottom'] {
-  > .bi-bubble-arrow {
-    top: -10px;
-    > .bubble-arrow {
-      top: 6px;
-    }
-  }
-}
-.bi-popup-view[data-popper-placement^='left'] {
-  > .bi-bubble-arrow {
-    right: -10px;
-    > .bubble-arrow {
-      right: 6px;
-    }
-  }
-}
-.bi-popup-view[data-popper-placement^='right'] {
-  > .bi-bubble-arrow {
-    left: -10px;
-    > .bubble-arrow {
-      left: 6px;
-    }
-  }
-}
-
-.bi-bubble-arrow {
-  width: 10px;
-  height: 10px;
-  overflow: hidden;
-  .bubble-arrow {
-    width: 10px;
-    height: 10px;
-    position: absolute;
-    &:before {
-      width: 10px;
-      height: 10px;
-      position: absolute;
-      content: "";
-      background: @color-bi-background-default;
-      top: 0;
-      left: 0;
-      transition: transform 0.2s ease-out 0s, visibility 0.2s ease-out 0s;
-      visibility: visible;
-      transform: translateX(0px) rotate(-135deg);
-      transform-origin: center center;
-      .box-shadow(3px 3px 10px 0,rgba(0,0,0,6%));
-    }
-  }
-}
+// .bi-combo-popup .bi-bubble-popup-view {
+//   &.bi-zoom-big-leave{
+//     .zoom-big-motion-enter();
+//   }
+//   &.bi-zoom-big-leave-active{
+//     .zoom-big-motion-enter-active();
+//   }
+// }

 .bi-theme-dark {
-  .bubble-arrow:before {
-    background: @color-bi-background-default-theme-dark;
-  }
  .bi-bubble-combo {
    & .bubble-combo-triangle-left, & .bubble-combo-triangle-right, & .bubble-combo-triangle-top, & .bubble-combo-triangle-bottom {
      &:before {
--- a/src/less/base/segment/button.segment.less
+++ b/src/less/base/segment/button.segment.less
@ -1,5 +1,7 @@
@import "../../index";

 .bi-segment-button {
+  @transition: color .3s,background .3s,border-color .3s,box-shadow .3s;
+  .transition(@transition);
  color: @color-bi-text-highlight;
 }
--- a/src/less/base/single/button/switch.less
+++ b/src/less/base/single/button/switch.less
@ -3,11 +3,13 @@
 .bi-switch{
  .border-radius(40px 40px 40px 40px);
  background-color: @color-bi-background-switch;
+  .transition(all .2s);
  &.active {
    background-color: @color-bi-background-active-switch;
  }
  & .circle-button{
    .border-radius(9px 9px 9px 9px);
+    .transition(all .2s ease-in-out);
  }
  &.disabled {
    background-color: @color-bi-background-disabled-switch;
--- a/src/less/base/view/popupview.less
+++ b/src/less/base/view/popupview.less
@ -1,6 +1,5 @@
@import "../../index";

-/**********BI.BIListView*************/
 .bi-popup-view {
  position: fixed !important;
  overflow-y: visible !important;
@ -28,7 +27,68 @@
  }
 }

+.bi-popup-view[data-popper-placement^='top'] {
+  > .bi-bubble-arrow {
+    bottom: -10px;
+    > .bubble-arrow {
+      bottom: 6px;
+    }
+  }
+}
+.bi-popup-view[data-popper-placement^='bottom'] {
+  > .bi-bubble-arrow {
+    top: -10px;
+    > .bubble-arrow {
+      top: 6px;
+    }
+  }
+}
+.bi-popup-view[data-popper-placement^='left'] {
+  > .bi-bubble-arrow {
+    right: -10px;
+    > .bubble-arrow {
+      right: 6px;
+    }
+  }
+}
+.bi-popup-view[data-popper-placement^='right'] {
+  > .bi-bubble-arrow {
+    left: -10px;
+    > .bubble-arrow {
+      left: 6px;
+    }
+  }
+}
+
+.bi-bubble-arrow {
+  width: 10px;
+  height: 10px;
+  overflow: hidden;
+  .bubble-arrow {
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    &:before {
+      width: 10px;
+      height: 10px;
+      position: absolute;
+      content: "";
+      background: @color-bi-background-default;
+      top: 0;
+      left: 0;
+      transition: transform 0.2s ease-out 0s, visibility 0.2s ease-out 0s;
+      visibility: visible;
+      transform: translateX(0px) rotate(-135deg);
+      transform-origin: center center;
+      .box-shadow(3px 3px 10px 0,rgba(0,0,0,6%));
+    }
+  }
+}
+
 .bi-theme-dark {
+  .bubble-arrow:before {
+    background: @color-bi-background-default-theme-dark;
+  }
  .bi-popup-view {
    & .list-view-toolbar {
      & > .center-element {
--- a/src/less/core/utils/motion/fade.less
+++ b/src/less/core/utils/motion/fade.less
@ -0,0 +1,36 @@
+@import "../../../index";
+
+.fade-motion(@className, @keyframeName) {
+  @name: ~'bi-@{className}';
+  .make-motion(@name, @keyframeName);
+  .@{name}-enter,
+  .@{name}-appear {
+    opacity: 0;
+    animation-timing-function: linear;
+  }
+  .@{name}-leave {
+    animation-timing-function: linear;
+  }
+}
+
+.fade-motion(fade, biFade);
+
+@keyframes biFadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes biFadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
--- a/src/less/core/utils/motion/move.less
+++ b/src/less/core/utils/motion/move.less
@ -0,0 +1,131 @@
+@import "../../../index";
+
+.move-motion(@className, @keyframeName) {
+  @name: ~'bi-@{className}';
+  .make-motion(@name, @keyframeName);
+  .@{name}-enter,
+  .@{name}-appear {
+    opacity: 0;
+    animation-timing-function: @ease-out-circ;
+  }
+  .@{name}-leave {
+    animation-timing-function: @ease-in-circ;
+  }
+}
+
+.move-motion(move-up, biMoveUp);
+.move-motion(move-down, biMoveDown);
+.move-motion(move-left, biMoveLeft);
+.move-motion(move-right, biMoveRight);
+
+@keyframes biMoveDownIn {
+  0% {
+    transform: translateY(100%);
+    transform-origin: 0 0;
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0%);
+    transform-origin: 0 0;
+    opacity: 1;
+  }
+}
+
+@keyframes biMoveDownOut {
+  0% {
+    transform: translateY(0%);
+    transform-origin: 0 0;
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateY(100%);
+    transform-origin: 0 0;
+    opacity: 0;
+  }
+}
+
+@keyframes biMoveLeftIn {
+  0% {
+    transform: translateX(-100%);
+    transform-origin: 0 0;
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateX(0%);
+    transform-origin: 0 0;
+    opacity: 1;
+  }
+}
+
+@keyframes biMoveLeftOut {
+  0% {
+    transform: translateX(0%);
+    transform-origin: 0 0;
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateX(-100%);
+    transform-origin: 0 0;
+    opacity: 0;
+  }
+}
+
+@keyframes biMoveRightIn {
+  0% {
+    transform: translateX(100%);
+    transform-origin: 0 0;
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateX(0%);
+    transform-origin: 0 0;
+    opacity: 1;
+  }
+}
+
+@keyframes biMoveRightOut {
+  0% {
+    transform: translateX(0%);
+    transform-origin: 0 0;
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateX(100%);
+    transform-origin: 0 0;
+    opacity: 0;
+  }
+}
+
+@keyframes biMoveUpIn {
+  0% {
+    transform: translateY(-100%);
+    transform-origin: 0 0;
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0%);
+    transform-origin: 0 0;
+    opacity: 1;
+  }
+}
+
+@keyframes biMoveUpOut {
+  0% {
+    transform: translateY(0%);
+    transform-origin: 0 0;
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateY(-100%);
+    transform-origin: 0 0;
+    opacity: 0;
+  }
+}
--- a/src/less/core/utils/motion/slide.less
+++ b/src/less/core/utils/motion/slide.less
@ -0,0 +1,131 @@
+@import "../../../index";
+
+.slide-motion(@className, @keyframeName) {
+  @name: ~'bi-@{className}';
+  .make-motion(@name, @keyframeName);
+  .@{name}-enter,
+  .@{name}-appear {
+    opacity: 0;
+    animation-timing-function: @ease-out-quint;
+  }
+  .@{name}-leave {
+    animation-timing-function: @ease-in-quint;
+  }
+}
+
+.slide-motion(slide-up, biSlideUp);
+.slide-motion(slide-down, biSlideDown);
+.slide-motion(slide-left, biSlideLeft);
+.slide-motion(slide-right, biSlideRight);
+
+@keyframes biSlideUpIn {
+  0% {
+    transform: scaleY(0.8);
+    transform-origin: 0% 0%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scaleY(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
+  }
+}
+
+@keyframes biSlideUpOut {
+  0% {
+    transform: scaleY(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
+  }
+
+  100% {
+    transform: scaleY(0.8);
+    transform-origin: 0% 0%;
+    opacity: 0;
+  }
+}
+
+@keyframes biSlideDownIn {
+  0% {
+    transform: scaleY(0.8);
+    transform-origin: 100% 100%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scaleY(1);
+    transform-origin: 100% 100%;
+    opacity: 1;
+  }
+}
+
+@keyframes biSlideDownOut {
+  0% {
+    transform: scaleY(1);
+    transform-origin: 100% 100%;
+    opacity: 1;
+  }
+
+  100% {
+    transform: scaleY(0.8);
+    transform-origin: 100% 100%;
+    opacity: 0;
+  }
+}
+
+@keyframes biSlideLeftIn {
+  0% {
+    transform: scaleX(0.8);
+    transform-origin: 0% 0%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scaleX(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
+  }
+}
+
+@keyframes biSlideLeftOut {
+  0% {
+    transform: scaleX(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
+  }
+
+  100% {
+    transform: scaleX(0.8);
+    transform-origin: 0% 0%;
+    opacity: 0;
+  }
+}
+
+@keyframes biSlideRightIn {
+  0% {
+    transform: scaleX(0.8);
+    transform-origin: 100% 0%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scaleX(1);
+    transform-origin: 100% 0%;
+    opacity: 1;
+  }
+}
+
+@keyframes biSlideRightOut {
+  0% {
+    transform: scaleX(1);
+    transform-origin: 100% 0%;
+    opacity: 1;
+  }
+
+  100% {
+    transform: scaleX(0.8);
+    transform-origin: 100% 0%;
+    opacity: 0;
+  }
+}
--- a/src/less/core/utils/motion/zoom.less
+++ b/src/less/core/utils/motion/zoom.less
@ -0,0 +1,181 @@
+@import "../../../index";
+
+.zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) {
+  @name: ~'bi-@{className}';
+  .make-motion(@name, @keyframeName, @duration);
+  .@{name}-enter,
+  .@{name}-appear {
+    transform: scale(0); // need this by yiminghe
+    opacity: 0;
+    animation-timing-function: @ease-out-circ;
+
+    &-prepare {
+      transform: none;
+    }
+  }
+  .@{name}-leave {
+    animation-timing-function: @ease-in-out-circ;
+  }
+}
+
+// For Modal, Select choosen item
+.zoom-motion(zoom, biZoom);
+// For Popover, Popconfirm, Dropdown
+.zoom-motion(zoom-big, biZoomBig);
+// For Tooltip
+.zoom-motion(zoom-big-fast, biZoomBig, @animation-duration-fast);
+
+.zoom-motion(zoom-up, biZoomUp);
+.zoom-motion(zoom-down, biZoomDown);
+.zoom-motion(zoom-left, biZoomLeft);
+.zoom-motion(zoom-right, biZoomRight);
+
+@keyframes biZoomIn {
+  0% {
+    transform: scale(0.2);
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes biZoomOut {
+  0% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(0.2);
+    opacity: 0;
+  }
+}
+
+@keyframes biZoomBigIn {
+  0% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes biZoomBigOut {
+  0% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+}
+
+@keyframes biZoomUpIn {
+  0% {
+    transform: scale(0.8);
+    transform-origin: 50% 0%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    transform-origin: 50% 0%;
+  }
+}
+
+@keyframes biZoomUpOut {
+  0% {
+    transform: scale(1);
+    transform-origin: 50% 0%;
+  }
+
+  100% {
+    transform: scale(0.8);
+    transform-origin: 50% 0%;
+    opacity: 0;
+  }
+}
+
+@keyframes biZoomLeftIn {
+  0% {
+    transform: scale(0.8);
+    transform-origin: 0% 50%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    transform-origin: 0% 50%;
+  }
+}
+
+@keyframes biZoomLeftOut {
+  0% {
+    transform: scale(1);
+    transform-origin: 0% 50%;
+  }
+
+  100% {
+    transform: scale(0.8);
+    transform-origin: 0% 50%;
+    opacity: 0;
+  }
+}
+
+@keyframes biZoomRightIn {
+  0% {
+    transform: scale(0.8);
+    transform-origin: 100% 50%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    transform-origin: 100% 50%;
+  }
+}
+
+@keyframes biZoomRightOut {
+  0% {
+    transform: scale(1);
+    transform-origin: 100% 50%;
+  }
+
+  100% {
+    transform: scale(0.8);
+    transform-origin: 100% 50%;
+    opacity: 0;
+  }
+}
+
+@keyframes biZoomDownIn {
+  0% {
+    transform: scale(0.8);
+    transform-origin: 50% 100%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    transform-origin: 50% 100%;
+  }
+}
+
+@keyframes biZoomDownOut {
+  0% {
+    transform: scale(1);
+    transform-origin: 50% 100%;
+  }
+
+  100% {
+    transform: scale(0.8);
+    transform-origin: 50% 100%;
+    opacity: 0;
+  }
+}
--- a/src/less/index.less
+++ b/src/less/index.less
@ -2,6 +2,7 @@
@import "box-model";
@import "typographic";
@import "visual";
+@import "motion";
@import "var";
@import "lib/colors";
@import "lib/theme";
--- a/src/less/modern.less
+++ b/src/less/modern.less
@ -9,6 +9,10 @@
@import "core/utils/size.less";
@import "core/utils/sizing.less";
@import "core/utils/typographic.less";
+@import "core/utils/motion/fade.less";
+@import "core/utils/motion/move.less";
+@import "core/utils/motion/slide.less";
+@import "core/utils/motion/zoom.less";
@import "core/wrapper/flex.horizontal.less";
@import "core/wrapper/flex.vertical.less";
@import "core/wrapper/flex.wrapper.horizontal.less";
--- a/src/less/motion.less
+++ b/src/less/motion.less
@ -0,0 +1,96 @@
+// Animation
+@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
+@ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
+@ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+@ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
+@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
+@ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
+@ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
+@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+
+// Animation
+@animation-duration-slow: 0.3s; // Modal
+@animation-duration-base: 0.2s;
+@animation-duration-fast: 0.1s; // Tooltip
+
+.motion-common(@duration: @animation-duration-base) {
+  animation-duration: @duration;
+  animation-fill-mode: both;
+}
+
+.motion-common-leave(@duration: @animation-duration-base) {
+  animation-duration: @duration;
+  animation-fill-mode: both;
+}
+
+.make-motion(@className, @keyframeName, @duration: @animation-duration-base) {
+  .@{className}-enter,
+  .@{className}-appear {
+    .motion-common(@duration);
+
+    animation-play-state: paused;
+  }
+  .@{className}-leave {
+    .motion-common-leave(@duration);
+
+    animation-play-state: paused;
+  }
+  .@{className}-enter.@{className}-enter-active,
+  .@{className}-appear.@{className}-appear-active {
+    animation-name: ~'@{keyframeName}In';
+    animation-play-state: running;
+  }
+  .@{className}-leave.@{className}-leave-active {
+    animation-name: ~'@{keyframeName}Out';
+    animation-play-state: running;
+    pointer-events: none;
+  }
+}
+
+.fade-motion-enter() {
+  opacity: 0;
+  animation-timing-function: linear;
+  .motion-common(@animation-duration-base);
+
+  animation-name: biFadeIn;
+  animation-play-state: running;
+}
+
+.fade-motion-leave() {
+  animation-timing-function: linear;
+  .motion-common-leave(@animation-duration-base);
+
+  animation-name: biFadeOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+
+.zoom-big-motion-enter() {
+  transform: scale(0); // need this by yiminghe
+  opacity: 0;
+  animation-timing-function: @ease-out-circ;
+
+  .motion-common(@animation-duration-base);
+  animation-play-state: paused;
+}
+.zoom-big-motion-enter-active() {
+  animation-name: biZoomBigIn;
+  animation-play-state: running;
+}
+
+.zoom-big-motion-leave() {
+  animation-timing-function: @ease-in-out-circ;
+
+  .motion-common-leave(@animation-duration-base);
+}
+.zoom-big-motion-leave-active() {
+  animation-name: biZoomBigOut;
+  animation-play-state: running;
+  pointer-events: none;
+}