From ea8b68b173edd0ac5cd90907dee2b2619ec6b178 Mon Sep 17 00:00:00 2001 From: guy Date: Thu, 30 Dec 2021 11:46:02 +0800 Subject: [PATCH 01/22] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=E4=B8=80?= =?UTF-8?q?=E4=B8=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/layer/layer.popover.js | 37 +++++++++++++-------------------- 1 file changed, 15 insertions(+), 22 deletions(-) diff --git a/src/base/layer/layer.popover.js b/src/base/layer/layer.popover.js index 87bd2d405..4bea91c1b 100644 --- a/src/base/layer/layer.popover.js +++ b/src/base/layer/layer.popover.js @@ -59,36 +59,29 @@ BI.Popover = BI.inherit(BI.Widget, { 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", - }, - left: 20, - top: 0, - right: 0, - bottom: 0, - }], - }, { - el: o.closable ? { + 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", + }, + lgap: 20, + rgap: 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, - }], + }: null], height: o.headerHeight, }, height: o.headerHeight, From a2f4b00b6ec00faaa2bfea26d22d1a0b39b2fabb Mon Sep 17 00:00:00 2001 From: guy Date: Thu, 30 Dec 2021 16:31:48 +0800 Subject: [PATCH 02/22] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=E4=B8=80?= =?UTF-8?q?=E4=B8=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/layer/layer.popover.js | 105 +++++++++++++++++--------------- 1 file changed, 57 insertions(+), 48 deletions(-) diff --git a/src/base/layer/layer.popover.js b/src/base/layer/layer.popover.js index 4bea91c1b..2ac5012d5 100644 --- 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,22 +56,27 @@ BI.Popover = BI.inherit(BI.Widget, { el: { type: "bi.htape", cls: "bi-message-title bi-header-background", - ref: function (_ref) { - self.dragger = _ref; - }, 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", - }, - lgap: 20, - rgap: o.closable ? 0 : 20 + el: { + type: "bi.absolute", + ref: function (_ref) { + self.dragger = _ref; + }, + 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", @@ -78,13 +84,13 @@ BI.Popover = BI.inherit(BI.Widget, { height: o.headerHeight, handler: function () { self.close(); - }, + } }, - width: 56, - }: null], - height: o.headerHeight, + width: 56 + } : null], + height: o.headerHeight }, - height: o.headerHeight, + height: o.headerHeight }, o.logic.dynamic ? { el: { type: "bi.vertical", @@ -95,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", @@ -111,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({ @@ -124,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; @@ -195,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" }; }, @@ -214,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); @@ -225,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, @@ -242,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], @@ -251,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); From 3fa2460f5d529d6aa23c6b664efd44332bdd3a09 Mon Sep 17 00:00:00 2001 From: data Date: Sat, 1 Jan 2022 14:23:10 +0800 Subject: [PATCH 03/22] auto upgrade version to 2.0.20220101142258 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 603817f2d..b12f70e5b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fineui", - "version": "2.0.20211230115312", + "version": "2.0.20220101142258", "description": "fineui", "main": "dist/fineui.min.js", "types": "dist/lib/index.d.ts", From e92c3ce3d655e8e1c44261b41740287760df0218 Mon Sep 17 00:00:00 2001 From: guy Date: Sat, 1 Jan 2022 14:44:38 +0800 Subject: [PATCH 04/22] =?UTF-8?q?chore=EF=BC=9A=E4=BC=98=E5=8C=96=E4=B8=80?= =?UTF-8?q?=E4=B8=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/foundation/message.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/base/foundation/message.js b/src/base/foundation/message.js index 8fade4b01..9653995c3 100644 --- a/src/base/foundation/message.js +++ b/src/base/foundation/message.js @@ -162,7 +162,7 @@ BI.Msg = function () { } } }, - width: 60 + width: 56 } } }, From 37174324393369d9ae5b40c9468310737c221f5b Mon Sep 17 00:00:00 2001 From: data Date: Sat, 1 Jan 2022 15:13:09 +0800 Subject: [PATCH 05/22] auto upgrade version to 2.0.20220101151256 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b12f70e5b..b9d09daee 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fineui", - "version": "2.0.20220101142258", + "version": "2.0.20220101151256", "description": "fineui", "main": "dist/fineui.min.js", "types": "dist/lib/index.d.ts", From 66c760a362c823dd60006c1409daf5101d662d66 Mon Sep 17 00:00:00 2001 From: guy Date: Sat, 1 Jan 2022 19:48:17 +0800 Subject: [PATCH 06/22] chore: update --- src/less/base/segment/button.segment.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/less/base/segment/button.segment.less b/src/less/base/segment/button.segment.less index 46757b435..1ccab2476 100644 --- a/src/less/base/segment/button.segment.less +++ b/src/less/base/segment/button.segment.less @@ -1,5 +1,6 @@ @import "../../index"; .bi-segment-button { + .transition(color .3s,background .3s,border-color .3s,box-shadow .3s); color: @color-bi-text-highlight; } From 000912b5319b6fc478ce112365beeed290cd6828 Mon Sep 17 00:00:00 2001 From: guy Date: Sat, 1 Jan 2022 19:58:39 +0800 Subject: [PATCH 07/22] update --- src/less/base/single/button/switch.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/less/base/single/button/switch.less b/src/less/base/single/button/switch.less index d08c780de..26f4b496b 100644 --- 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; From 885c8e7a57902a6f9fe91b64ab4c7a5c99752f7b Mon Sep 17 00:00:00 2001 From: guy Date: Sat, 1 Jan 2022 21:31:01 +0800 Subject: [PATCH 08/22] =?UTF-8?q?=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/case/combo/bubblecombo/popup.bubble.js | 4 +- src/less/base/combo/combo.bubble.less | 9 + src/less/base/segment/button.segment.less | 3 +- src/less/core/utils/motion/fade.less | 36 ++++ src/less/core/utils/motion/move.less | 131 +++++++++++++++ src/less/core/utils/motion/slide.less | 131 +++++++++++++++ src/less/core/utils/motion/zoom.less | 181 +++++++++++++++++++++ src/less/index.less | 1 + src/less/modern.less | 1 + src/less/motion.less | 96 +++++++++++ 10 files changed, 590 insertions(+), 3 deletions(-) create mode 100644 src/less/core/utils/motion/fade.less create mode 100644 src/less/core/utils/motion/move.less create mode 100644 src/less/core/utils/motion/slide.less create mode 100644 src/less/core/utils/motion/zoom.less create mode 100644 src/less/motion.less diff --git a/src/case/combo/bubblecombo/popup.bubble.js b/src/case/combo/bubblecombo/popup.bubble.js index 2fa9999ea..dade95184 100644 --- a/src/case/combo/bubblecombo/popup.bubble.js +++ b/src/case/combo/bubblecombo/popup.bubble.js @@ -8,7 +8,7 @@ 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-leave bi-zoom-big-leave-active", minWidth: 220, maxWidth: 300, minHeight: 90 @@ -102,7 +102,7 @@ BI.TextBubblePopupBarView = BI.inherit(BI.Widget, { props: function () { return { - baseCls: "bi-text-bubble-bar-popup-view", + baseCls: "bi-text-bubble-bar-popup-view bi-bubble-popup-view", text: "", buttons: [{ level: "ignore", diff --git a/src/less/base/combo/combo.bubble.less b/src/less/base/combo/combo.bubble.less index fe2867772..c5be6bc9b 100644 --- a/src/less/base/combo/combo.bubble.less +++ b/src/less/base/combo/combo.bubble.less @@ -32,6 +32,15 @@ } } +.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-popup-view[data-popper-placement^='top'] { > .bi-bubble-arrow { bottom: -10px; diff --git a/src/less/base/segment/button.segment.less b/src/less/base/segment/button.segment.less index 1ccab2476..4247740f4 100644 --- a/src/less/base/segment/button.segment.less +++ b/src/less/base/segment/button.segment.less @@ -1,6 +1,7 @@ @import "../../index"; .bi-segment-button { - .transition(color .3s,background .3s,border-color .3s,box-shadow .3s); + @transition: color .3s,background .3s,border-color .3s,box-shadow .3s; + .transition(@transition); color: @color-bi-text-highlight; } diff --git a/src/less/core/utils/motion/fade.less b/src/less/core/utils/motion/fade.less new file mode 100644 index 000000000..ad14b0bc1 --- /dev/null +++ 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; + } +} diff --git a/src/less/core/utils/motion/move.less b/src/less/core/utils/motion/move.less new file mode 100644 index 000000000..ab707807c --- /dev/null +++ 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; + } +} diff --git a/src/less/core/utils/motion/slide.less b/src/less/core/utils/motion/slide.less new file mode 100644 index 000000000..b956f8814 --- /dev/null +++ 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; + } +} diff --git a/src/less/core/utils/motion/zoom.less b/src/less/core/utils/motion/zoom.less new file mode 100644 index 000000000..d3351eeef --- /dev/null +++ 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; + } +} diff --git a/src/less/index.less b/src/less/index.less index 5bf77d7b2..3644b8e34 100644 --- 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"; diff --git a/src/less/modern.less b/src/less/modern.less index 9703cc17b..f3563a8d9 100644 --- a/src/less/modern.less +++ b/src/less/modern.less @@ -9,6 +9,7 @@ @import "core/utils/size.less"; @import "core/utils/sizing.less"; @import "core/utils/typographic.less"; +@import "core/utils/motion.less"; @import "core/wrapper/flex.horizontal.less"; @import "core/wrapper/flex.vertical.less"; @import "core/wrapper/flex.wrapper.horizontal.less"; diff --git a/src/less/motion.less b/src/less/motion.less new file mode 100644 index 000000000..1f3e571b9 --- /dev/null +++ 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; +} From 0a5275753a67671d9fb62382e0b57e9555f480d1 Mon Sep 17 00:00:00 2001 From: guy Date: Sat, 1 Jan 2022 22:04:09 +0800 Subject: [PATCH 09/22] =?UTF-8?q?=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/case/combo/bubblecombo/popup.bubble.js | 8 +-- src/less/base/combo/combo.bubble.less | 77 +++------------------- src/less/base/view/popupview.less | 62 ++++++++++++++++- 3 files changed, 73 insertions(+), 74 deletions(-) diff --git a/src/case/combo/bubblecombo/popup.bubble.js b/src/case/combo/bubblecombo/popup.bubble.js index dade95184..7eb70b26d 100644 --- 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 bi-zoom-big-leave bi-zoom-big-leave-active", + 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); @@ -102,7 +102,7 @@ BI.TextBubblePopupBarView = BI.inherit(BI.Widget, { props: function () { return { - baseCls: "bi-text-bubble-bar-popup-view bi-bubble-popup-view", + baseCls: "bi-text-bubble-bar-popup-view", text: "", buttons: [{ level: "ignore", @@ -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); diff --git a/src/less/base/combo/combo.bubble.less b/src/less/base/combo/combo.bubble.less index c5be6bc9b..4a77badf7 100644 --- a/src/less/base/combo/combo.bubble.less +++ b/src/less/base/combo/combo.bubble.less @@ -32,77 +32,16 @@ } } -.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-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 { diff --git a/src/less/base/view/popupview.less b/src/less/base/view/popupview.less index 43f2c0c84..d88bf8ffc 100644 --- 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 { From 89b595ac4038333684f91a961fabe9eebff139d5 Mon Sep 17 00:00:00 2001 From: guy Date: Sat, 1 Jan 2022 22:07:38 +0800 Subject: [PATCH 10/22] ad d --- src/less/modern.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/less/modern.less b/src/less/modern.less index f3563a8d9..691f901c9 100644 --- a/src/less/modern.less +++ b/src/less/modern.less @@ -9,7 +9,10 @@ @import "core/utils/size.less"; @import "core/utils/sizing.less"; @import "core/utils/typographic.less"; -@import "core/utils/motion.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"; From a95bb35ca43107a0969692e5bbfb984b7d0bb1a7 Mon Sep 17 00:00:00 2001 From: guy Date: Sat, 1 Jan 2022 22:44:14 +0800 Subject: [PATCH 11/22] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=E4=B8=80?= =?UTF-8?q?=E4=B8=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/less/motion.less | 20 +------------------- 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/src/less/motion.less b/src/less/motion.less index 1f3e571b9..3bd4a4368 100644 --- a/src/less/motion.less +++ b/src/less/motion.less @@ -53,26 +53,8 @@ } } -.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 + transform: scale(0); opacity: 0; animation-timing-function: @ease-out-circ; From b657f30cc46a3b7d96c888722ac55dca01760cf9 Mon Sep 17 00:00:00 2001 From: guy Date: Sat, 1 Jan 2022 22:59:28 +0800 Subject: [PATCH 12/22] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=E4=B8=80?= =?UTF-8?q?=E4=B8=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/less/modern.less | 248 +++++++++++++++++++++---------------------- 1 file changed, 124 insertions(+), 124 deletions(-) diff --git a/src/less/modern.less b/src/less/modern.less index 691f901c9..a6b80bd1d 100644 --- a/src/less/modern.less +++ b/src/less/modern.less @@ -1,127 +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/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"; +////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"; From cd1a1781caa76334268df8bc908caecd680c7ae4 Mon Sep 17 00:00:00 2001 From: guy Date: Sat, 1 Jan 2022 23:27:25 +0800 Subject: [PATCH 13/22] chore: update --- src/case/combo/bubblecombo/combo.bubble.js | 6 ++++-- src/case/combo/bubblecombo/popup.bubble.js | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/case/combo/bubblecombo/combo.bubble.js b/src/case/combo/bubblecombo/combo.bubble.js index dd77173f3..5cedb9b5d 100644 --- 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); diff --git a/src/case/combo/bubblecombo/popup.bubble.js b/src/case/combo/bubblecombo/popup.bubble.js index 7eb70b26d..68804bc5b 100644 --- a/src/case/combo/bubblecombo/popup.bubble.js +++ b/src/case/combo/bubblecombo/popup.bubble.js @@ -8,7 +8,7 @@ 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 bi-zoom-big-enter bi-zoom-big-enter-active", + baseCls: config.baseCls + " bi-bubble-popup-view", minWidth: 220, maxWidth: 300, minHeight: 90 From ea66544ec251134a12f815f8a4d30557412b6113 Mon Sep 17 00:00:00 2001 From: guy Date: Sun, 2 Jan 2022 00:32:45 +0800 Subject: [PATCH 14/22] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=E4=B8=80?= =?UTF-8?q?=E4=B8=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/case/linersegment/linear.segment.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/case/linersegment/linear.segment.js b/src/case/linersegment/linear.segment.js index f0060dce3..d7febfcd1 100644 --- a/src/case/linersegment/linear.segment.js +++ b/src/case/linersegment/linear.segment.js @@ -18,6 +18,7 @@ BI.LinearSegment = BI.inherit(BI.Widget, { height: o.height - 1 }), 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); \ No newline at end of file +BI.shortcut("bi.linear_segment", BI.LinearSegment); From 79d7fe937f2c7586b20e661e03fda3db530d6115 Mon Sep 17 00:00:00 2001 From: guy Date: Sun, 2 Jan 2022 00:38:43 +0800 Subject: [PATCH 15/22] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=E4=B8=80?= =?UTF-8?q?=E4=B8=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/case/linersegment/button.linear.segment.js | 5 +++-- src/case/linersegment/linear.segment.js | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/case/linersegment/button.linear.segment.js b/src/case/linersegment/button.linear.segment.js index be8403844..38479accb 100644 --- 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); \ No newline at end of file +BI.shortcut("bi.linear_segment_button", BI.LinearSegmentButton); diff --git a/src/case/linersegment/linear.segment.js b/src/case/linersegment/linear.segment.js index d7febfcd1..3c1b677c3 100644 --- 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,7 +15,7 @@ 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, From b9171cd42819fc08511d7d360ae63f72af5f8222 Mon Sep 17 00:00:00 2001 From: guy Date: Sun, 2 Jan 2022 00:50:00 +0800 Subject: [PATCH 16/22] update --- src/less/base/segment/button.segment.less | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/less/base/segment/button.segment.less b/src/less/base/segment/button.segment.less index 4247740f4..ff94a544d 100644 --- a/src/less/base/segment/button.segment.less +++ b/src/less/base/segment/button.segment.less @@ -5,3 +5,9 @@ .transition(@transition); color: @color-bi-text-highlight; } + +.bi-line-segment-button{ + .line-segment-button-line{ + .transition(background .3s); + } +} \ No newline at end of file From 5cdeb7c770e73580662356c0badd31b81a8e22fe Mon Sep 17 00:00:00 2001 From: guy Date: Sun, 2 Jan 2022 00:50:18 +0800 Subject: [PATCH 17/22] upda --- src/less/base/segment/button.segment.less | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/less/base/segment/button.segment.less b/src/less/base/segment/button.segment.less index ff94a544d..66fbed510 100644 --- a/src/less/base/segment/button.segment.less +++ b/src/less/base/segment/button.segment.less @@ -1,13 +1,13 @@ @import "../../index"; .bi-segment-button { - @transition: color .3s,background .3s,border-color .3s,box-shadow .3s; + @transition: color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s; .transition(@transition); color: @color-bi-text-highlight; } -.bi-line-segment-button{ - .line-segment-button-line{ - .transition(background .3s); +.bi-line-segment-button { + .line-segment-button-line { + .transition(background 0.3s); } -} \ No newline at end of file +} From a4f9a488d1e56de89d18e6c863f40ad0c5a8f4a9 Mon Sep 17 00:00:00 2001 From: guy Date: Mon, 3 Jan 2022 17:17:00 +0800 Subject: [PATCH 18/22] =?UTF-8?q?=E5=85=88=E5=88=A0=E6=8E=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/less/core/utils/motion/fade.less | 36 ----- src/less/core/utils/motion/move.less | 131 ------------------- src/less/core/utils/motion/slide.less | 131 ------------------- src/less/core/utils/motion/zoom.less | 181 -------------------------- 4 files changed, 479 deletions(-) delete mode 100644 src/less/core/utils/motion/fade.less delete mode 100644 src/less/core/utils/motion/move.less delete mode 100644 src/less/core/utils/motion/slide.less delete mode 100644 src/less/core/utils/motion/zoom.less diff --git a/src/less/core/utils/motion/fade.less b/src/less/core/utils/motion/fade.less deleted file mode 100644 index ad14b0bc1..000000000 --- a/src/less/core/utils/motion/fade.less +++ /dev/null @@ -1,36 +0,0 @@ -@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; - } -} diff --git a/src/less/core/utils/motion/move.less b/src/less/core/utils/motion/move.less deleted file mode 100644 index ab707807c..000000000 --- a/src/less/core/utils/motion/move.less +++ /dev/null @@ -1,131 +0,0 @@ -@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; - } -} diff --git a/src/less/core/utils/motion/slide.less b/src/less/core/utils/motion/slide.less deleted file mode 100644 index b956f8814..000000000 --- a/src/less/core/utils/motion/slide.less +++ /dev/null @@ -1,131 +0,0 @@ -@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; - } -} diff --git a/src/less/core/utils/motion/zoom.less b/src/less/core/utils/motion/zoom.less deleted file mode 100644 index d3351eeef..000000000 --- a/src/less/core/utils/motion/zoom.less +++ /dev/null @@ -1,181 +0,0 @@ -@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; - } -} From 94d7b8a8a784af2fee5605903a984e1678d1ca40 Mon Sep 17 00:00:00 2001 From: data Date: Mon, 3 Jan 2022 17:32:23 +0800 Subject: [PATCH 19/22] auto upgrade version to 2.0.20220103173210 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b9d09daee..fcb54ab7e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fineui", - "version": "2.0.20220101151256", + "version": "2.0.20220103173210", "description": "fineui", "main": "dist/fineui.min.js", "types": "dist/lib/index.d.ts", From e54933d1755b23c0e7507719e1edd65b8eae4384 Mon Sep 17 00:00:00 2001 From: guy Date: Mon, 3 Jan 2022 17:36:10 +0800 Subject: [PATCH 20/22] animate --- src/less/core/utils/motion/fade.less | 35 +++++ src/less/core/utils/motion/move.less | 130 +++++++++++++++++++ src/less/core/utils/motion/slide.less | 130 +++++++++++++++++++ src/less/core/utils/motion/zoom.less | 180 ++++++++++++++++++++++++++ 4 files changed, 475 insertions(+) create mode 100644 src/less/core/utils/motion/fade.less create mode 100644 src/less/core/utils/motion/move.less create mode 100644 src/less/core/utils/motion/slide.less create mode 100644 src/less/core/utils/motion/zoom.less diff --git a/src/less/core/utils/motion/fade.less b/src/less/core/utils/motion/fade.less new file mode 100644 index 000000000..c0f1ce61d --- /dev/null +++ b/src/less/core/utils/motion/fade.less @@ -0,0 +1,35 @@ +@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; + } +} diff --git a/src/less/core/utils/motion/move.less b/src/less/core/utils/motion/move.less new file mode 100644 index 000000000..e3b85b00f --- /dev/null +++ b/src/less/core/utils/motion/move.less @@ -0,0 +1,130 @@ +@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; + } +} diff --git a/src/less/core/utils/motion/slide.less b/src/less/core/utils/motion/slide.less new file mode 100644 index 000000000..d8d2257fb --- /dev/null +++ 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; + } +} diff --git a/src/less/core/utils/motion/zoom.less b/src/less/core/utils/motion/zoom.less new file mode 100644 index 000000000..b7edb31ca --- /dev/null +++ b/src/less/core/utils/motion/zoom.less @@ -0,0 +1,180 @@ +@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; + } +} From d5f832332b1f194a52012d1ed03ef1c4c3d545a4 Mon Sep 17 00:00:00 2001 From: guy Date: Mon, 3 Jan 2022 18:33:20 +0800 Subject: [PATCH 21/22] =?UTF-8?q?=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/less/core/utils/motion/fade.less | 8 ++-- src/less/core/utils/motion/move.less | 32 +++++++-------- src/less/core/utils/motion/slide.less | 32 +++++++-------- src/less/core/utils/motion/zoom.less | 58 ++++++++++++--------------- 4 files changed, 62 insertions(+), 68 deletions(-) diff --git a/src/less/core/utils/motion/fade.less b/src/less/core/utils/motion/fade.less index c0f1ce61d..d51a68c75 100644 --- a/src/less/core/utils/motion/fade.less +++ b/src/less/core/utils/motion/fade.less @@ -14,7 +14,7 @@ .fade-motion(bi-fade, biFade); -@keyframes biFadeIn { +.keyframes(biFadeIn, { 0% { opacity: 0; } @@ -22,9 +22,9 @@ 100% { opacity: 1; } -} +}); -@keyframes biFadeOut { +.keyframes(biFadeOut, { 0% { opacity: 1; } @@ -32,4 +32,4 @@ 100% { opacity: 0; } -} +}); diff --git a/src/less/core/utils/motion/move.less b/src/less/core/utils/motion/move.less index e3b85b00f..3024c2a8b 100644 --- a/src/less/core/utils/motion/move.less +++ b/src/less/core/utils/motion/move.less @@ -17,7 +17,7 @@ .move-motion(bi-move-left, biMoveLeft); .move-motion(bi-move-right, biMoveRight); -@keyframes biMoveDownIn { +.keyframes(biMoveDownIn, { 0% { transform: translateY(100%); transform-origin: 0 0; @@ -29,9 +29,9 @@ transform-origin: 0 0; opacity: 1; } -} +}); -@keyframes biMoveDownOut { +.keyframes(biMoveDownOut, { 0% { transform: translateY(0%); transform-origin: 0 0; @@ -43,9 +43,9 @@ transform-origin: 0 0; opacity: 0; } -} +}); -@keyframes biMoveLeftIn { +.keyframes(biMoveLeftIn, { 0% { transform: translateX(-100%); transform-origin: 0 0; @@ -57,9 +57,9 @@ transform-origin: 0 0; opacity: 1; } -} +}); -@keyframes biMoveLeftOut { +.keyframes(biMoveLeftOut, { 0% { transform: translateX(0%); transform-origin: 0 0; @@ -71,9 +71,9 @@ transform-origin: 0 0; opacity: 0; } -} +}); -@keyframes biMoveRightIn { +.keyframes(biMoveRightIn, { 0% { transform: translateX(100%); transform-origin: 0 0; @@ -85,9 +85,9 @@ transform-origin: 0 0; opacity: 1; } -} +}); -@keyframes biMoveRightOut { +.keyframes(biMoveRightOut, { 0% { transform: translateX(0%); transform-origin: 0 0; @@ -99,9 +99,9 @@ transform-origin: 0 0; opacity: 0; } -} +}); -@keyframes biMoveUpIn { +.keyframes(biMoveUpIn, { 0% { transform: translateY(-100%); transform-origin: 0 0; @@ -113,9 +113,9 @@ transform-origin: 0 0; opacity: 1; } -} +}); -@keyframes biMoveUpOut { +.keyframes(biMoveUpOut, { 0% { transform: translateY(0%); transform-origin: 0 0; @@ -127,4 +127,4 @@ transform-origin: 0 0; opacity: 0; } -} +}); diff --git a/src/less/core/utils/motion/slide.less b/src/less/core/utils/motion/slide.less index d8d2257fb..0fa6567a4 100644 --- a/src/less/core/utils/motion/slide.less +++ b/src/less/core/utils/motion/slide.less @@ -17,7 +17,7 @@ .slide-motion(bi-slide-left, biSlideLeft); .slide-motion(bi-slide-right, biSlideRight); -@keyframes biSlideUpIn { +.keyframes(biSlideUpIn, { 0% { transform: scaleY(0.8); transform-origin: 0% 0%; @@ -29,9 +29,9 @@ transform-origin: 0% 0%; opacity: 1; } -} +}); -@keyframes biSlideUpOut { +.keyframes(biSlideUpOut, { 0% { transform: scaleY(1); transform-origin: 0% 0%; @@ -43,9 +43,9 @@ transform-origin: 0% 0%; opacity: 0; } -} +}); -@keyframes biSlideDownIn { +.keyframes(biSlideDownIn, { 0% { transform: scaleY(0.8); transform-origin: 100% 100%; @@ -57,9 +57,9 @@ transform-origin: 100% 100%; opacity: 1; } -} +}); -@keyframes biSlideDownOut { +.keyframes(biSlideDownOut, { 0% { transform: scaleY(1); transform-origin: 100% 100%; @@ -71,9 +71,9 @@ transform-origin: 100% 100%; opacity: 0; } -} +}); -@keyframes biSlideLeftIn { +.keyframes(biSlideLeftIn, { 0% { transform: scaleX(0.8); transform-origin: 0% 0%; @@ -85,9 +85,9 @@ transform-origin: 0% 0%; opacity: 1; } -} +}); -@keyframes biSlideLeftOut { +.keyframes(biSlideLeftOut, { 0% { transform: scaleX(1); transform-origin: 0% 0%; @@ -99,9 +99,9 @@ transform-origin: 0% 0%; opacity: 0; } -} +}); -@keyframes biSlideRightIn { +.keyframes(biSlideRightIn, { 0% { transform: scaleX(0.8); transform-origin: 100% 0%; @@ -113,9 +113,9 @@ transform-origin: 100% 0%; opacity: 1; } -} +}); -@keyframes biSlideRightOut { +.keyframes(biSlideRightOut, { 0% { transform: scaleX(1); transform-origin: 100% 0%; @@ -127,4 +127,4 @@ transform-origin: 100% 0%; opacity: 0; } -} +}); diff --git a/src/less/core/utils/motion/zoom.less b/src/less/core/utils/motion/zoom.less index b7edb31ca..0a4094601 100644 --- a/src/less/core/utils/motion/zoom.less +++ b/src/less/core/utils/motion/zoom.less @@ -29,7 +29,7 @@ .zoom-motion(bi-zoom-left, biZoomLeft); .zoom-motion(bi-zoom-right, biZoomRight); -@keyframes biZoomIn { +.keyframes(biZoomIn, { 0% { transform: scale(0.2); opacity: 0; @@ -39,20 +39,14 @@ transform: scale(1); opacity: 1; } -} - -@keyframes biZoomOut { - 0% { - transform: scale(1); - } +}); - 100% { - transform: scale(0.2); - opacity: 0; - } -} +.keyframes(biZoomOut, { + 0% { transform: scale(1); } + 100% { transform: scale(0.2); opacity: 0; } +}); -@keyframes biZoomBigIn { +.keyframes(biZoomBigIn, { 0% { transform: scale(0.8); opacity: 0; @@ -62,9 +56,9 @@ transform: scale(1); opacity: 1; } -} +}); -@keyframes biZoomBigOut { +.keyframes(biZoomBigOut, { 0% { transform: scale(1); } @@ -73,9 +67,9 @@ transform: scale(0.8); opacity: 0; } -} +}); -@keyframes biZoomUpIn { +.keyframes(biZoomUpIn, { 0% { transform: scale(0.8); transform-origin: 50% 0%; @@ -86,9 +80,9 @@ transform: scale(1); transform-origin: 50% 0%; } -} +}); -@keyframes biZoomUpOut { +.keyframes(biZoomUpOut, { 0% { transform: scale(1); transform-origin: 50% 0%; @@ -99,9 +93,9 @@ transform-origin: 50% 0%; opacity: 0; } -} +}); -@keyframes biZoomLeftIn { +.keyframes(biZoomLeftIn, { 0% { transform: scale(0.8); transform-origin: 0% 50%; @@ -112,9 +106,9 @@ transform: scale(1); transform-origin: 0% 50%; } -} +}); -@keyframes biZoomLeftOut { +.keyframes(biZoomLeftOut, { 0% { transform: scale(1); transform-origin: 0% 50%; @@ -125,9 +119,9 @@ transform-origin: 0% 50%; opacity: 0; } -} +}); -@keyframes biZoomRightIn { +.keyframes(biZoomRightIn, { 0% { transform: scale(0.8); transform-origin: 100% 50%; @@ -138,9 +132,9 @@ transform: scale(1); transform-origin: 100% 50%; } -} +}); -@keyframes biZoomRightOut { +.keyframes(biZoomRightOut, { 0% { transform: scale(1); transform-origin: 100% 50%; @@ -151,9 +145,9 @@ transform-origin: 100% 50%; opacity: 0; } -} +}); -@keyframes biZoomDownIn { +.keyframes(biZoomDownIn, { 0% { transform: scale(0.8); transform-origin: 50% 100%; @@ -164,9 +158,9 @@ transform: scale(1); transform-origin: 50% 100%; } -} +}); -@keyframes biZoomDownOut { +.keyframes(biZoomDownOut, { 0% { transform: scale(1); transform-origin: 50% 100%; @@ -177,4 +171,4 @@ transform-origin: 50% 100%; opacity: 0; } -} +}); From b32ecccaa63da73e513893459ef06836d4d941aa Mon Sep 17 00:00:00 2001 From: guy Date: Mon, 3 Jan 2022 23:36:18 +0800 Subject: [PATCH 22/22] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=E4=B8=80?= =?UTF-8?q?=E4=B8=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/less/core/utils/motion/fade.less | 28 +-- src/less/core/utils/motion/move.less | 150 ++++----------- src/less/core/utils/motion/slide.less | 222 +++++++++++----------- src/less/core/utils/motion/zoom.less | 259 ++++++++++++-------------- 4 files changed, 282 insertions(+), 377 deletions(-) diff --git a/src/less/core/utils/motion/fade.less b/src/less/core/utils/motion/fade.less index d51a68c75..9ad3bbaea 100644 --- a/src/less/core/utils/motion/fade.less +++ b/src/less/core/utils/motion/fade.less @@ -14,22 +14,12 @@ .fade-motion(bi-fade, biFade); -.keyframes(biFadeIn, { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -}); - -.keyframes(biFadeOut, { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } -}); +//.keyframes(biFadeIn, { +// 0% {opacity: 0;} +// 100% {opacity: 1;} +//}); +// +//.keyframes(biFadeOut, { +// 0% {opacity: 1;} +// 100% {opacity: 0;} +//}); diff --git a/src/less/core/utils/motion/move.less b/src/less/core/utils/motion/move.less index 3024c2a8b..decc9f33d 100644 --- a/src/less/core/utils/motion/move.less +++ b/src/less/core/utils/motion/move.less @@ -17,114 +17,42 @@ .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; - } -}); +//.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;} +//}); diff --git a/src/less/core/utils/motion/slide.less b/src/less/core/utils/motion/slide.less index 0fa6567a4..77909bbbc 100644 --- a/src/less/core/utils/motion/slide.less +++ b/src/less/core/utils/motion/slide.less @@ -17,114 +17,114 @@ .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; - } -}); +//.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; +// } +//}); diff --git a/src/less/core/utils/motion/zoom.less b/src/less/core/utils/motion/zoom.less index 0a4094601..c16ce98a9 100644 --- a/src/less/core/utils/motion/zoom.less +++ b/src/less/core/utils/motion/zoom.less @@ -29,146 +29,133 @@ .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(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; - } + 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; - } + 0% {transform: scale(1);} + 100% {transform: scale(0.8);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; - } -}); +//.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; +// } +//});