Merge branch 'master' of https://code.fineres.com/scm/visual/fineui

# Conflicts:
#	src/less/base/combo/combo.bubble.less
#	src/less/base/segment/button.segment.less

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fineui",
-  "version": "2.0.20211230115312",
+  "version": "2.0.20220103173210",
   "description": "fineui",
   "main": "dist/fineui.min.js",
   "types": "dist/lib/index.d.ts",

src/base/foundation/message.js

@@ -162,7 +162,7 @@ BI.Msg = function () {
                                                     }
                                                 }
                                             },
-                                            width: 60
+                                            width: 56
                                         }
                                     }
                                 },

src/base/layer/layer.popover.js

@@ -8,7 +8,7 @@ BI.Popover = BI.inherit(BI.Widget, {
         SIZE: {
             SMALL: "small",
             NORMAL: "normal",
-            BIG: "big",
+            BIG: "big"
         },
         MAX_HEIGHT: 600
     },
@@ -17,7 +17,7 @@ BI.Popover = BI.inherit(BI.Widget, {
         baseCls: "bi-popover bi-card bi-border-radius",
         size: "normal", // small, normal, big
         logic: {
-            dynamic: false,
+            dynamic: false
         },
         header: null,
         headerHeight: 40,
@@ -30,7 +30,8 @@ BI.Popover = BI.inherit(BI.Widget, {
     },
 
     render: function () {
-        var self = this; var o = this.options;
+        var self = this;
+        var o = this.options;
         var c = this._constant;
         this.startX = 0;
         this.startY = 0;
@@ -42,11 +43,11 @@ BI.Popover = BI.inherit(BI.Widget, {
             self.startY += deltaY;
             self.element.css({
                 left: BI.clamp(self.startX, 0, W - self.element.width()) + "px",
-                top: BI.clamp(self.startY, 0, H - self.element.height()) + "px",
+                top: BI.clamp(self.startY, 0, H - self.element.height()) + "px"
             });
             // BI-12134 没有什么特别好的方法
             BI.Resizers._resize({
-                target: self.element[0],
+                target: self.element[0]
             });
         }, function () {
             self.tracker.releaseMouseMoves();
@@ -55,43 +56,41 @@ BI.Popover = BI.inherit(BI.Widget, {
             el: {
                 type: "bi.htape",
                 cls: "bi-message-title bi-header-background",
-                ref: function (_ref) {
-                    self.dragger = _ref;
-                },
                 items: [{
-                    type: "bi.absolute",
-                    items: [{
-                        el: BI.isPlainObject(o.header) ? BI.extend({}, o.header, {
-                            extraCls: "bi-font-bold",
-                        }) : {
-                            type: "bi.label",
-                            cls: "bi-font-bold",
-                            height: o.headerHeight,
-                            text: o.header,
-                            title: o.header,
-                            textAlign: "left",
+                    el: {
+                        type: "bi.absolute",
+                        ref: function (_ref) {
+                            self.dragger = _ref;
                         },
-                        left: 20,
-                        top: 0,
-                        right: 0,
-                        bottom: 0,
-                    }],
-                }, {
-                    el: o.closable ? {
+                        items: [{
+                            el: BI.isPlainObject(o.header) ? BI.extend({}, o.header, {
+                                extraCls: "bi-font-bold"
+                            }) : {
+                                type: "bi.label",
+                                cls: "bi-font-bold",
+                                height: o.headerHeight,
+                                text: o.header,
+                                title: o.header,
+                                textAlign: "left"
+                            },
+                            left: 20,
+                            right: o.closable ? 0 : 20
+                        }]
+                    }
+                }, o.closable ? {
+                    el: {
                         type: "bi.icon_button",
                         cls: "bi-message-close close-font",
                         height: o.headerHeight,
                         handler: function () {
                             self.close();
-                        },
-                    } : {
-                        type: "bi.layout",
+                        }
                     },
-                    width: 56,
-                }],
-                height: o.headerHeight,
+                    width: 56
+                } : null],
+                height: o.headerHeight
             },
-            height: o.headerHeight,
+            height: o.headerHeight
         }, o.logic.dynamic ? {
             el: {
                 type: "bi.vertical",
@@ -102,14 +101,14 @@ BI.Popover = BI.inherit(BI.Widget, {
                 },
                 css: {
                     "max-height": this._getSuitableBodyHeight(c.MAX_HEIGHT - o.headerHeight - (o.footer ? o.footerHeight : 0) - o.bodyTgap),
-                    "min-height": this._getSuitableBodyHeight(size.height - o.headerHeight - (o.footer ? o.footerHeight : 0) - o.bodyTgap),
+                    "min-height": this._getSuitableBodyHeight(size.height - o.headerHeight - (o.footer ? o.footerHeight : 0) - o.bodyTgap)
                 },
                 items: [{
-                    el: o.body,
-                }],
+                    el: o.body
+                }]
             },
             hgap: o.bodyHgap,
-            tgap: o.bodyTgap,
+            tgap: o.bodyTgap
         } : {
             el: {
                 type: "bi.absolute",
@@ -118,9 +117,9 @@ BI.Popover = BI.inherit(BI.Widget, {
                     left: o.bodyHgap,
                     top: o.bodyTgap,
                     right: o.bodyHgap,
-                    bottom: 0,
-                }],
-            },
+                    bottom: 0
+                }]
+            }
         }];
         if (o.footer) {
             items.push({
@@ -131,30 +130,31 @@ BI.Popover = BI.inherit(BI.Widget, {
                         left: 20,
                         top: 0,
                         right: 20,
-                        bottom: 0,
+                        bottom: 0
                     }],
-                    height: o.footerHeight,
+                    height: o.footerHeight
                 },
-                height: o.footerHeight,
+                height: o.footerHeight
             });
         }
 
         return BI.extend({
             type: o.logic.dynamic ? "bi.vertical" : "bi.vtape",
             items: items,
-            width: this._getSuitableWidth(size.width),
+            width: this._getSuitableWidth(size.width)
         }, o.logic.dynamic ? {
             type: "bi.vertical",
-            scrolly: false,
+            scrolly: false
         } : {
             type: "bi.vtape",
-            height: this._getSuitableHeight(size.height),
+            height: this._getSuitableHeight(size.height)
         });
     },
 
     // mounted之后绑定事件
     mounted: function () {
-        var self = this; var o = this.options;
+        var self = this;
+        var o = this.options;
         this.dragger.element.mousedown(function (e) {
             var pos = self.element.offset();
             self.startX = pos.left;
@@ -202,7 +202,7 @@ BI.Popover = BI.inherit(BI.Widget, {
         return {
             width: o.width || size.width,
             height: o.height || size.height,
-            type: size.type || "default",
+            type: size.type || "default"
         };
     },
 
@@ -221,10 +221,11 @@ BI.Popover = BI.inherit(BI.Widget, {
     },
 
     setZindex: function (zindex) {
-        this.element.css({ "z-index": zindex });
+        this.element.css({"z-index": zindex});
     },
 
-    destroyed: function () {},
+    destroyed: function () {
+    }
 });
 
 BI.shortcut("bi.popover", BI.Popover);
@@ -232,12 +233,13 @@ BI.shortcut("bi.popover", BI.Popover);
 BI.BarPopover = BI.inherit(BI.Popover, {
     _defaultConfig: function () {
         return BI.extend(BI.BarPopover.superclass._defaultConfig.apply(this, arguments), {
-            btns: [BI.i18nText("BI-Basic_Sure"), BI.i18nText("BI-Basic_Cancel")],
+            btns: [BI.i18nText("BI-Basic_Sure"), BI.i18nText("BI-Basic_Cancel")]
         });
     },
 
     beforeCreate: function () {
-        var self = this; var o = this.options;
+        var self = this;
+        var o = this.options;
         o.footer || (o.footer = {
             type: "bi.right_vertical_adapt",
             lgap: 10,
@@ -249,7 +251,7 @@ BI.BarPopover = BI.inherit(BI.Popover, {
                 handler: function (v) {
                     self.fireEvent(BI.Popover.EVENT_CANCEL, v);
                     self.close(v);
-                },
+                }
             }, {
                 type: "bi.button",
                 text: this.options.btns[0],
@@ -258,10 +260,10 @@ BI.BarPopover = BI.inherit(BI.Popover, {
                 handler: function (v) {
                     self.fireEvent(BI.Popover.EVENT_CONFIRM, v);
                     self.close(v);
-                },
-            }],
+                }
+            }]
         });
-    },
+    }
 });
 
 BI.shortcut("bi.bar_popover", BI.BarPopover);

src/case/combo/bubblecombo/combo.bubble.js

@@ -54,8 +54,10 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
             offsetStyle: o.offsetStyle,
             el: o.el,
             popup: BI.extend({
-                type: "bi.bubble_popup_view"
-            }, o.popup)
+                type: "bi.bubble_popup_view",
+            }, o.popup, {
+                cls: (o.popup.cls || "") + " bi-zoom-big-enter bi-zoom-big-enter-active"
+            })
         });
         this.combo.on(BI.Combo.EVENT_TRIGGER_CHANGE, function () {
             self.fireEvent(BI.BubbleCombo.EVENT_TRIGGER_CHANGE, arguments);

src/case/combo/bubblecombo/popup.bubble.js

@@ -13,7 +13,7 @@ BI.BubblePopupView = BI.inherit(BI.PopupView, {
             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);

src/case/linersegment/button.linear.segment.js

@@ -5,7 +5,7 @@ BI.LinearSegmentButton = BI.inherit(BI.BasicButton, {
         once: true,
         readonly: true,
         hgap: 10,
-        height: 25
+        height: 24
     },
 
     render: function () {
@@ -15,6 +15,7 @@ BI.LinearSegmentButton = BI.inherit(BI.BasicButton, {
             type: "bi.label",
             text: o.text,
             height: o.height,
+            textHeight: o.height - 2,
             value: o.value,
             hgap: o.hgap,
             ref: function () {
@@ -51,4 +52,4 @@ BI.LinearSegmentButton = BI.inherit(BI.BasicButton, {
         this.text.setText(text);
     }
 });
-BI.shortcut("bi.linear_segment_button", BI.LinearSegmentButton);
+BI.shortcut("bi.linear_segment_button", BI.LinearSegmentButton);

src/case/linersegment/linear.segment.js

@@ -6,7 +6,7 @@ BI.LinearSegment = BI.inherit(BI.Widget, {
         layouts: [{
             type: "bi.center"
         }],
-        height: 29
+        height: 30
     },
 
     render: function () {
@@ -15,9 +15,10 @@ BI.LinearSegment = BI.inherit(BI.Widget, {
             type: "bi.button_group",
             items: BI.createItems(o.items, {
                 type: "bi.linear_segment_button",
-                height: o.height - 1
+                height: o.height
             }),
             layouts: o.layouts,
+            value: o.value,
             listeners: [{
                 eventName: "__EVENT_CHANGE__",
                 action: function () {
@@ -48,4 +49,4 @@ BI.LinearSegment = BI.inherit(BI.Widget, {
         return this.buttonGroup.getValue();
     }
 });
-BI.shortcut("bi.linear_segment", BI.LinearSegment);
+BI.shortcut("bi.linear_segment", BI.LinearSegment);

src/less/base/segment/button.segment.less

@@ -3,3 +3,9 @@
 .bi-segment-button {
   color: @color-bi-text-segment-button;
 }
+
+.bi-line-segment-button {
+  .line-segment-button-line {
+    .transition(background 0.3s);
+  }
+}

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;

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 {

src/less/core/utils/motion/fade.less

@@ -0,0 +1,25 @@
+@import "../../../index";
+
+.fade-motion(@className, @keyframeName) {
+  .make-motion(@className, @keyframeName);
+  .@{className}-enter,
+  .@{className}-appear {
+    opacity: 0;
+    animation-timing-function: linear;
+  }
+  .@{className}-leave {
+    animation-timing-function: linear;
+  }
+}
+
+.fade-motion(bi-fade, biFade);
+
+//.keyframes(biFadeIn, {
+//  0% {opacity: 0;}
+//  100% {opacity: 1;}
+//});
+//
+//.keyframes(biFadeOut, {
+//  0% {opacity: 1;}
+//  100% {opacity: 0;}
+//});

src/less/core/utils/motion/move.less

@@ -0,0 +1,58 @@
+@import "../../../index";
+
+.move-motion(@className, @keyframeName) {
+  .make-motion(@className, @keyframeName);
+  .@{className}-enter,
+  .@{className}-appear {
+    opacity: 0;
+    animation-timing-function: @ease-out-circ;
+  }
+  .@{className}-leave {
+    animation-timing-function: @ease-in-circ;
+  }
+}
+
+.move-motion(bi-move-up, biMoveUp);
+.move-motion(bi-move-down, biMoveDown);
+.move-motion(bi-move-left, biMoveLeft);
+.move-motion(bi-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;}
+//});

src/less/core/utils/motion/slide.less

@@ -0,0 +1,130 @@
+@import "../../../index";
+
+.slide-motion(@className, @keyframeName) {
+  .make-motion(@className, @keyframeName);
+  .@{className}-enter,
+  .@{className}-appear {
+    opacity: 0;
+    animation-timing-function: @ease-out-quint;
+  }
+  .@{className}-leave {
+    animation-timing-function: @ease-in-quint;
+  }
+}
+
+.slide-motion(bi-slide-up, biSlideUp);
+.slide-motion(bi-slide-down, biSlideDown);
+.slide-motion(bi-slide-left, biSlideLeft);
+.slide-motion(bi-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;
+//  }
+//});

src/less/core/utils/motion/zoom.less

@@ -0,0 +1,161 @@
+@import "../../../index";
+
+.zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) {
+  .make-motion(@className, @keyframeName, @duration);
+  .@{className}-enter,
+  .@{className}-appear {
+    transform: scale(0); // need this by yiminghe
+    opacity: 0;
+    animation-timing-function: @ease-out-circ;
+
+    &-prepare {
+      transform: none;
+    }
+  }
+  .@{className}-leave {
+    animation-timing-function: @ease-in-out-circ;
+  }
+}
+
+// For Modal, Select choosen item
+.zoom-motion(bi-zoom, biZoom);
+// For Popover, Popconfirm, Dropdown
+.zoom-motion(bi-zoom-big, biZoomBig);
+// For Tooltip
+.zoom-motion(bi-zoom-big-fast, biZoomBig, @animation-duration-fast);
+
+.zoom-motion(bi-zoom-up, biZoomUp);
+.zoom-motion(bi-zoom-down, biZoomDown);
+.zoom-motion(bi-zoom-left, biZoomLeft);
+.zoom-motion(bi-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;
+//  }
+//});

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";

src/less/modern.less

@@ -1,123 +1,127 @@
-//core
-@import "core/normalize.less";
-@import "core/normalize2.less";
-@import "core/utils/animation.less";
-@import "core/utils/common.less";
-@import "core/utils/cursor.less";
-@import "core/utils/list-item.less";
-@import "core/utils/position.less";
-@import "core/utils/size.less";
-@import "core/utils/sizing.less";
-@import "core/utils/typographic.less";
-@import "core/wrapper/flex.horizontal.less";
-@import "core/wrapper/flex.vertical.less";
-@import "core/wrapper/flex.wrapper.horizontal.less";
-@import "core/wrapper/flex.wrapper.vertical.less";
-@import "core/wrapper/float.absolute.less";
-@import "core/wrapper/inline.less";
-
-//base case
-@import "base/pane.less";
-@import "base/colorchooser/colorchooser.trigger.less";
-@import "base/colorchooser/colorchooser.popup.less";
-@import "base/colorchooser/colorpicker/button.colorpicker.less";
-@import "base/colorchooser/colorpicker/button.colorshow.less";
-@import "base/colorchooser/colorpicker/editor.colorpicker.less";
-@import "base/colorchooser/farbtastic/farbtastic.less";
-@import "base/combo/combo.bubble.less";
-@import "base/combo/combo.less";
-@import "base/combo/combo.searchtextvalue.less";
-@import "base/combo/combo.textvalue.icon.less";
-@import "base/combo/combo.textvalue.less";
-@import "base/combo/combo.textvaluecheck.less";
-@import "base/combo/combo.textvaluedownlist.less";
-@import "base/combo/popup.bubble.bar.less";
-@import "base/combo/popup.bubble.less";
-@import "base/editor/editor.search.less";
-@import "base/editor/editor.search.small.less";
-@import "base/foundation/bi.message.less";
-@import "base/layer/layer.multiselect.less";
-@import "base/layer/panel.less";
-@import "base/loader/sort.list.less";
-@import "base/pager/pager.all.count.less";
-@import "base/pager/pager.direction.less";
-@import "base/pager/pager.less";
-@import "base/segment/button.segment.less";
-@import "base/segment/segment.less";
-@import "base/single/html.less";
-@import "base/single/label.less";
-@import "base/single/text.less";
-@import "base/single/button/button.half.less";
-@import "base/single/button/button.less";
-@import "base/single/button/item.singleselect.icontext.less";
-@import "base/single/button/switch.less";
-@import "base/single/editor/editor.multifile.less";
-@import "base/single/editor/editor.textarea.less";
-@import "base/single/input/checkbox.less";
-@import "base/single/input/file.less";
-@import "base/single/input/input.less";
-@import "base/single/input/radio.less";
-@import "base/single/tip/tip.bubble.less";
-@import "base/single/tip/tip.less";
-@import "base/single/tip/tip.toast.less";
-@import "base/single/tip/tip.tooltip.less";
-@import "base/tree/tree.branch.less";
-@import "base/tree/tree.display.less";
-@import "base/tree/tree.expander.less";
-@import "base/tree/tree.list.display.less";
-@import "base/tree/ztree.less";
-@import "base/trigger/trigger.less";
-@import "base/trigger/trigger.selecttext.less";
-@import "base/trigger/trigger.selecttextsmall.less";
-@import "base/view/popover.less";
-@import "base/view/popupview.less";
-
-//widget
-@import "widget/date/trigger.date.less";
-@import "widget/downlist/popup.downlist.less";
-@import "widget/dynamicdatecombo/dynamicdatepopup.less";
-@import "widget/dynamicdatecombo/dynamicdatetime.combo.less";
-@import "widget/dynamicdatecombo/dynamicdatetimepopup.less";
-@import "widget/interactivearrangement/interactivearrangement.less";
-@import "widget/intervalslider/intervalslider.label.less";
-@import "widget/intervalslider/intervalslider.less";
-@import "widget/month/trigger.month.less";
-@import "widget/multilayerselecttree/multilayerselecttree.combo.less";
-@import "widget/multilayerselecttree/multilayerselecttree.leveltree.less";
-@import "widget/multilayersingletree/multilayersingletree.combo.less";
-@import "widget/multilayersingletree/multilayersingletree.leveltree.less";
-@import "widget/multiselect/multiselect.combo.less";
-@import "widget/multiselect/multiselect.insert.combo.less";
-@import "widget/multiselect/check/multiselect.check.pane.less";
-@import "widget/multiselect/search/multiselect.search.pane.less";
-@import "widget/multiselect/trigger/button.checkselected.less";
-@import "widget/multistringlist/multistringlist.insert.less";
-@import "widget/multistringlist/multistringlist.less";
-@import "widget/multitree/multi.tree.combo.less";
-@import "widget/multitree/popup.multi.tree.less";
-@import "widget/multitree/check/multi.tree.check.pane.less";
-@import "widget/multitree/trigger/multi.tree.button.checkselected.less";
-@import "widget/numbereditor/number.editor.less";
-@import "widget/numberinterval/numberinterval.less";
-@import "widget/quarter/trigger.quarter.less";
-@import "widget/searchmultiselect/searchmultiselect.less";
-@import "widget/singleselect/singleselect.combo.less";
-@import "widget/singleselect/search/singleselect.search.pane.less";
-@import "widget/singleslider/singlelider.label.less";
-@import "widget/singleslider/singlelider.normal.less";
-@import "widget/singleslider/singleslider.less";
-@import "widget/singleslider/slider/widget.slider.less";
-@import "widget/singleslider/track/widget.track.less";
-@import "widget/timecombo/timecombo.less";
-@import "widget/timeinterval/dateinterval.less";
-@import "widget/timeinterval/timeinterval.less";
-@import "widget/year/popup.year.less";
-@import "widget/year/trigger.year.less";
-@import "widget/yearinterval/yearinterval.less";
-@import "widget/yearmonth/popup.yearmonth.less";
-@import "widget/yearmonthinterval/yearmonthinterval.less";
-@import "widget/yearquarter/popup.yearquarter.less";
-@import "widget/yearquarterinterval/yearquarterinterval.less";
+////core
+//@import "core/normalize.less";
+//@import "core/normalize2.less";
+//@import "core/utils/animation.less";
+//@import "core/utils/common.less";
+//@import "core/utils/cursor.less";
+//@import "core/utils/list-item.less";
+//@import "core/utils/position.less";
+//@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";
+//@import "core/wrapper/flex.wrapper.vertical.less";
+//@import "core/wrapper/float.absolute.less";
+//@import "core/wrapper/inline.less";
+//
+////base case
+//@import "base/pane.less";
+//@import "base/colorchooser/colorchooser.trigger.less";
+//@import "base/colorchooser/colorchooser.popup.less";
+//@import "base/colorchooser/colorpicker/button.colorpicker.less";
+//@import "base/colorchooser/colorpicker/button.colorshow.less";
+//@import "base/colorchooser/colorpicker/editor.colorpicker.less";
+//@import "base/colorchooser/farbtastic/farbtastic.less";
+//@import "base/combo/combo.bubble.less";
+//@import "base/combo/combo.less";
+//@import "base/combo/combo.searchtextvalue.less";
+//@import "base/combo/combo.textvalue.icon.less";
+//@import "base/combo/combo.textvalue.less";
+//@import "base/combo/combo.textvaluecheck.less";
+//@import "base/combo/combo.textvaluedownlist.less";
+//@import "base/combo/popup.bubble.bar.less";
+//@import "base/combo/popup.bubble.less";
+//@import "base/editor/editor.search.less";
+//@import "base/editor/editor.search.small.less";
+//@import "base/foundation/bi.message.less";
+//@import "base/layer/layer.multiselect.less";
+//@import "base/layer/panel.less";
+//@import "base/loader/sort.list.less";
+//@import "base/pager/pager.all.count.less";
+//@import "base/pager/pager.direction.less";
+//@import "base/pager/pager.less";
+//@import "base/segment/button.segment.less";
+//@import "base/segment/segment.less";
+//@import "base/single/html.less";
+//@import "base/single/label.less";
+//@import "base/single/text.less";
+//@import "base/single/button/button.half.less";
+//@import "base/single/button/button.less";
+//@import "base/single/button/item.singleselect.icontext.less";
+//@import "base/single/button/switch.less";
+//@import "base/single/editor/editor.multifile.less";
+//@import "base/single/editor/editor.textarea.less";
+//@import "base/single/input/checkbox.less";
+//@import "base/single/input/file.less";
+//@import "base/single/input/input.less";
+//@import "base/single/input/radio.less";
+//@import "base/single/tip/tip.bubble.less";
+//@import "base/single/tip/tip.less";
+//@import "base/single/tip/tip.toast.less";
+//@import "base/single/tip/tip.tooltip.less";
+//@import "base/tree/tree.branch.less";
+//@import "base/tree/tree.display.less";
+//@import "base/tree/tree.expander.less";
+//@import "base/tree/tree.list.display.less";
+//@import "base/tree/ztree.less";
+//@import "base/trigger/trigger.less";
+//@import "base/trigger/trigger.selecttext.less";
+//@import "base/trigger/trigger.selecttextsmall.less";
+//@import "base/view/popover.less";
+//@import "base/view/popupview.less";
+//
+////widget
+//@import "widget/date/trigger.date.less";
+//@import "widget/downlist/popup.downlist.less";
+//@import "widget/dynamicdatecombo/dynamicdatepopup.less";
+//@import "widget/dynamicdatecombo/dynamicdatetime.combo.less";
+//@import "widget/dynamicdatecombo/dynamicdatetimepopup.less";
+//@import "widget/interactivearrangement/interactivearrangement.less";
+//@import "widget/intervalslider/intervalslider.label.less";
+//@import "widget/intervalslider/intervalslider.less";
+//@import "widget/month/trigger.month.less";
+//@import "widget/multilayerselecttree/multilayerselecttree.combo.less";
+//@import "widget/multilayerselecttree/multilayerselecttree.leveltree.less";
+//@import "widget/multilayersingletree/multilayersingletree.combo.less";
+//@import "widget/multilayersingletree/multilayersingletree.leveltree.less";
+//@import "widget/multiselect/multiselect.combo.less";
+//@import "widget/multiselect/multiselect.insert.combo.less";
+//@import "widget/multiselect/check/multiselect.check.pane.less";
+//@import "widget/multiselect/search/multiselect.search.pane.less";
+//@import "widget/multiselect/trigger/button.checkselected.less";
+//@import "widget/multistringlist/multistringlist.insert.less";
+//@import "widget/multistringlist/multistringlist.less";
+//@import "widget/multitree/multi.tree.combo.less";
+//@import "widget/multitree/popup.multi.tree.less";
+//@import "widget/multitree/check/multi.tree.check.pane.less";
+//@import "widget/multitree/trigger/multi.tree.button.checkselected.less";
+//@import "widget/numbereditor/number.editor.less";
+//@import "widget/numberinterval/numberinterval.less";
+//@import "widget/quarter/trigger.quarter.less";
+//@import "widget/searchmultiselect/searchmultiselect.less";
+//@import "widget/singleselect/singleselect.combo.less";
+//@import "widget/singleselect/search/singleselect.search.pane.less";
+//@import "widget/singleslider/singlelider.label.less";
+//@import "widget/singleslider/singlelider.normal.less";
+//@import "widget/singleslider/singleslider.less";
+//@import "widget/singleslider/slider/widget.slider.less";
+//@import "widget/singleslider/track/widget.track.less";
+//@import "widget/timecombo/timecombo.less";
+//@import "widget/timeinterval/dateinterval.less";
+//@import "widget/timeinterval/timeinterval.less";
+//@import "widget/year/popup.year.less";
+//@import "widget/year/trigger.year.less";
+//@import "widget/yearinterval/yearinterval.less";
+//@import "widget/yearmonth/popup.yearmonth.less";
+//@import "widget/yearmonthinterval/yearmonthinterval.less";
+//@import "widget/yearquarter/popup.yearquarter.less";
+//@import "widget/yearquarterinterval/yearquarterinterval.less";
 
 @import "lib/colors-modern";
 @import "lib/theme-modern";

src/less/motion.less

@@ -0,0 +1,78 @@
+// 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;
+  }
+}
+
+.zoom-big-motion-enter() {
+  transform: scale(0);
+  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;
+}