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
3 years ago · 16affb47af
17 changed files with 719 additions and 188 deletions
--- a/package.json
+++ b/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",
--- a/src/base/foundation/message.js
+++ b/src/base/foundation/message.js
@ -162,7 +162,7 @@ BI.Msg = function () {
                                                    }
                                                }
                                            },
-                                            width: 60
+                                            width: 56
                                        }
                                    }
                                },
--- a/src/base/layer/layer.popover.js
+++ b/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);
--- a/src/case/combo/bubblecombo/combo.bubble.js
+++ b/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);
--- a/src/case/combo/bubblecombo/popup.bubble.js
+++ b/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);
--- a/src/case/linersegment/button.linear.segment.js
+++ b/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);
--- a/src/case/linersegment/linear.segment.js
+++ b/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);
--- a/src/less/base/segment/button.segment.less
+++ b/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);
+  }
+}
--- 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,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;}
+//});
--- a/src/less/core/utils/motion/move.less
+++ b/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;}
+//});
--- a/src/less/core/utils/motion/slide.less
+++ b/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;
+//  }
+//});
--- a/src/less/core/utils/motion/zoom.less
+++ b/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;
+//  }
+//});
--- 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
@ -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";
--- a/src/less/motion.less
+++ b/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;
+}