From 5fcfc1651bcdcd5226277d524486de139e3fafec Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Mon, 27 Aug 2018 16:10:32 +0800 Subject: [PATCH 1/7] =?UTF-8?q?=E6=9B=BF=E6=8D=A2gif=EF=BC=8C=E4=BD=BF?= =?UTF-8?q?=E7=94=A8css=20animation=E5=AE=9E=E7=8E=B0=E7=BB=84=E4=BB=B6loa?= =?UTF-8?q?ding=E5=8A=A0=E8=BD=BD=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/pane.js | 38 +++++++++++++++++++++++++++----------- src/less/base/pane.less | 23 +++++++++++++++++++++++ 2 files changed, 50 insertions(+), 11 deletions(-) diff --git a/src/base/pane.js b/src/base/pane.js index 9f36eff2a..5a5e202dd 100644 --- a/src/base/pane.js +++ b/src/base/pane.js @@ -50,27 +50,43 @@ BI.Pane = BI.inherit(BI.Widget, { loading: function () { var self = this, o = this.options; + var loadingAnimation = BI.createWidget({ + type: "bi.horizontal", + cls: "bi-loading-widget", + height: 60, + width: 60, + hgap: 10, + vgap: 5, + items: [{ + type: "bi.layout", + cls: "rect1", + height: 50, + width: 5 + }, { + type: "bi.layout", + cls: "rect2", + height: 50, + width: 5 + }, { + type: "bi.layout", + cls: "rect3", + height: 50, + width: 5 + }] + }); if (o.overlap === true) { if (!BI.Layers.has(this.getName())) { BI.createWidget({ - type: "bi.vtape", + type: "bi.center_adapt", items: [{ - el: { - type: "bi.layout", - cls: "loading-background" - }, - height: 30 + el: loadingAnimation }], element: BI.Layers.make(this.getName(), this) }); } BI.Layers.show(self.getName()); } else if (BI.isNull(this._loading)) { - this._loading = BI.createWidget({ - type: "bi.layout", - cls: "loading-background", - height: 30 - }); + this._loading = loadingAnimation; this._loading.element.css("zIndex", 1); BI.createWidget({ type: "bi.absolute", diff --git a/src/less/base/pane.less b/src/less/base/pane.less index fa9dcf2fc..be55d2f28 100644 --- a/src/less/base/pane.less +++ b/src/less/base/pane.less @@ -3,4 +3,27 @@ .bi-pane { min-height: 25px; .background-color(@color-bi-background-normal, 0); +} + +.bi-loading-widget { + &>div { + .background-color(@background-color-highlight, 90%); + .border-radius(2.5px); + animation: loading-widget 0.8s infinite linear; + } + & .rect2 { + animation-delay: -0.2s; + } + & .rect3 { + animation-delay: -0.4s; + } + + @keyframes loading-widget { + 0%, 100% { + transform: scaleY(0.3); + } + 50% { + transform: scaleY(1); + } + } } \ No newline at end of file From 209f963848b070d633133a2a33f5c44a227dd11c Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Mon, 27 Aug 2018 19:51:51 +0800 Subject: [PATCH 2/7] =?UTF-8?q?BI-30745=20=E6=A0=B9=E6=8D=AEcaniuse?= =?UTF-8?q?=E7=BD=91=E7=AB=99=E6=9F=A5=E8=AF=A2=E7=9A=84=E5=85=BC=E5=AE=B9?= =?UTF-8?q?=E6=80=A7=EF=BC=8C=E5=A2=9E=E5=8A=A0=E6=B5=8F=E8=A7=88=E5=99=A8?= =?UTF-8?q?=E5=85=BC=E5=AE=B9=E5=89=8D=E7=BC=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/less/base/pane.less | 69 +++++++++++++++++++++++++++-------------- 1 file changed, 46 insertions(+), 23 deletions(-) diff --git a/src/less/base/pane.less b/src/less/base/pane.less index be55d2f28..d63e32577 100644 --- a/src/less/base/pane.less +++ b/src/less/base/pane.less @@ -1,29 +1,52 @@ @import "../index"; - .bi-pane { - min-height: 25px; - .background-color(@color-bi-background-normal, 0); + min-height: 25px; + .background-color(@color-bi-background-normal, 0); } .bi-loading-widget { - &>div { - .background-color(@background-color-highlight, 90%); - .border-radius(2.5px); - animation: loading-widget 0.8s infinite linear; - } - & .rect2 { - animation-delay: -0.2s; - } - & .rect3 { - animation-delay: -0.4s; - } - - @keyframes loading-widget { - 0%, 100% { - transform: scaleY(0.3); - } - 50% { - transform: scaleY(1); - } - } + &>div { + .background-color(@background-color-highlight, 90%); + .border-radius(2.5px); + -webkit-animation: loading-widget 0.8s infinite linear; + -moz-animation: loading-widget 0.8s infinite linear; + animation: loading-widget 0.8s infinite linear; + } + & .rect2 { + -webkit-animation-delay: -0.2s; + -moz-animation-delay: -0.2s; + animation-delay: -0.2s; + } + & .rect3 { + -webkit-animation-delay: -0.4s; + -moz-animation-delay: -0.4s; + animation-delay: -0.4s; + } + @-webkit-keyframes loading-widget { + 0%, + 100% { + -webkit-transform: scaleY(0.3); + } + 50% { + -webkit-transform: scaleY(1); + } + } + @-moz-keyframes loading-widget { + 0%, + 100% { + -moz-transform: scaleY(0.3); + } + 50% { + -moz-transform: scaleY(1); + } + } + @keyframes loading-widget { + 0%, + 100% { + transform: scaleY(0.3); + } + 50% { + transform: scaleY(1); + } + } } \ No newline at end of file From b14c9524e89d46ff708a9181babb623c444a763f Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Mon, 27 Aug 2018 20:57:51 +0800 Subject: [PATCH 3/7] =?UTF-8?q?BI-30745=20=E5=AF=B9=E4=BA=8Ecss3=E7=9A=84a?= =?UTF-8?q?nimation=E7=9A=84=E6=B5=8F=E8=A7=88=E5=99=A8=E5=85=BC=E5=AE=B9?= =?UTF-8?q?=E5=89=8D=E7=BC=80=E9=97=AE=E9=A2=98=EF=BC=8C=E5=AE=9A=E4=B9=89?= =?UTF-8?q?less?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/less/animation.less | 41 +++++++++++++++++++++++++++++++++++++++++ src/less/base/pane.less | 38 +++++++------------------------------- 2 files changed, 48 insertions(+), 31 deletions(-) create mode 100644 src/less/animation.less diff --git a/src/less/animation.less b/src/less/animation.less new file mode 100644 index 000000000..cea8874f9 --- /dev/null +++ b/src/less/animation.less @@ -0,0 +1,41 @@ +.keyframes(@name, @frames) { + @-webkit-keyframes @name { + @frames(); + } + @-moz-keyframes @name { + @frames(); + } + @-ms-keyframes @name { + @frames(); + } + @-o-keyframes @name { + @frames(); + } + @keyframes @name { + @frames(); + } +} + +.animation(@attr) { + -webkit-animation: @attr; + -moz-animation: @attr; + -ms-animation: @attr; + -o-animation: @attr; + animation: @attr; +} + +.animation-delay(@attr) { + -webkit-animation-delay: @attr; + -moz-animation-delay: @attr; + -ms-animation-delay: @attr; + -o-animation-delay: @attr; + animation-delay: @attr; +} + +.transform(@attr) { + -webkit-transform: @attr; + -moz-transform: @attr; + -o-transform: @attr; + -ms-transform: @attr; + transform: @attr; +} \ No newline at end of file diff --git a/src/less/base/pane.less b/src/less/base/pane.less index d63e32577..1e2246c58 100644 --- a/src/less/base/pane.less +++ b/src/less/base/pane.less @@ -8,45 +8,21 @@ &>div { .background-color(@background-color-highlight, 90%); .border-radius(2.5px); - -webkit-animation: loading-widget 0.8s infinite linear; - -moz-animation: loading-widget 0.8s infinite linear; - animation: loading-widget 0.8s infinite linear; + .animation(loading-widget 0.8s infinite linear); } & .rect2 { - -webkit-animation-delay: -0.2s; - -moz-animation-delay: -0.2s; - animation-delay: -0.2s; + .animation-delay(-0.2s); } & .rect3 { - -webkit-animation-delay: -0.4s; - -moz-animation-delay: -0.4s; - animation-delay: -0.4s; + .animation-delay(-0.4s); } - @-webkit-keyframes loading-widget { + .keyframes (loading-widget, { 0%, 100% { - -webkit-transform: scaleY(0.3); + .transform (scaleY(0.3)); } 50% { - -webkit-transform: scaleY(1); + .transform (scaleY(1)); } - } - @-moz-keyframes loading-widget { - 0%, - 100% { - -moz-transform: scaleY(0.3); - } - 50% { - -moz-transform: scaleY(1); - } - } - @keyframes loading-widget { - 0%, - 100% { - transform: scaleY(0.3); - } - 50% { - transform: scaleY(1); - } - } + }); } \ No newline at end of file From e6bc65d5e6d068602c1fce304cbd7d90667e2823 Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Tue, 28 Aug 2018 09:32:20 +0800 Subject: [PATCH 4/7] =?UTF-8?q?BI-30745=20=E5=B0=86css=20animation?= =?UTF-8?q?=E7=9B=B8=E5=85=B3=E7=9A=84less=20mixin=E7=A7=BB=E5=88=B0visual?= =?UTF-8?q?.less=E6=96=87=E4=BB=B6=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/less/animation.less | 41 --------------------------------------- src/less/visual.less | 43 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 43 insertions(+), 41 deletions(-) delete mode 100644 src/less/animation.less diff --git a/src/less/animation.less b/src/less/animation.less deleted file mode 100644 index cea8874f9..000000000 --- a/src/less/animation.less +++ /dev/null @@ -1,41 +0,0 @@ -.keyframes(@name, @frames) { - @-webkit-keyframes @name { - @frames(); - } - @-moz-keyframes @name { - @frames(); - } - @-ms-keyframes @name { - @frames(); - } - @-o-keyframes @name { - @frames(); - } - @keyframes @name { - @frames(); - } -} - -.animation(@attr) { - -webkit-animation: @attr; - -moz-animation: @attr; - -ms-animation: @attr; - -o-animation: @attr; - animation: @attr; -} - -.animation-delay(@attr) { - -webkit-animation-delay: @attr; - -moz-animation-delay: @attr; - -ms-animation-delay: @attr; - -o-animation-delay: @attr; - animation-delay: @attr; -} - -.transform(@attr) { - -webkit-transform: @attr; - -moz-transform: @attr; - -o-transform: @attr; - -ms-transform: @attr; - transform: @attr; -} \ No newline at end of file diff --git a/src/less/visual.less b/src/less/visual.less index 54c0a4dd2..f7290cb70 100644 --- a/src/less/visual.less +++ b/src/less/visual.less @@ -254,4 +254,47 @@ content: ""; transform: rotate(-45deg); } +} + +// css3 animation +.keyframes(@name, @frames) { + @-webkit-keyframes @name { + @frames(); + } + @-moz-keyframes @name { + @frames(); + } + @-ms-keyframes @name { + @frames(); + } + @-o-keyframes @name { + @frames(); + } + @keyframes @name { + @frames(); + } +} + +.animation(@attr) { + -webkit-animation: @attr; + -moz-animation: @attr; + -ms-animation: @attr; + -o-animation: @attr; + animation: @attr; +} + +.animation-delay(@attr) { + -webkit-animation-delay: @attr; + -moz-animation-delay: @attr; + -ms-animation-delay: @attr; + -o-animation-delay: @attr; + animation-delay: @attr; +} + +.transform(@attr) { + -webkit-transform: @attr; + -moz-transform: @attr; + -o-transform: @attr; + -ms-transform: @attr; + transform: @attr; } \ No newline at end of file From 2881c41cd8d9ab8ee422552858a9a5a071a527a1 Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Tue, 28 Aug 2018 17:28:04 +0800 Subject: [PATCH 5/7] =?UTF-8?q?BI-30745=20=E4=BD=BF=E7=94=A8js=E5=88=A4?= =?UTF-8?q?=E6=96=AD=E6=98=AF=E5=90=A6ie=E6=9D=A5=E5=85=BC=E5=AE=B9?= =?UTF-8?q?=E4=BD=8E=E7=89=88=E6=9C=ACie?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/pane.js | 14 ++++++++++---- src/less/base/pane.less | 6 +++--- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/base/pane.js b/src/base/pane.js index 5a5e202dd..421f31273 100644 --- a/src/base/pane.js +++ b/src/base/pane.js @@ -74,22 +74,28 @@ BI.Pane = BI.inherit(BI.Widget, { width: 5 }] }); + var loadingGif = BI.createWidget({ + type: "bi.layout", + cls: "loading-background", + height: 30 + }); + var loadingEffect = (BI.isIE() && BI.getIEVersion() < 10) ? loadingGif : loadingAnimation; if (o.overlap === true) { if (!BI.Layers.has(this.getName())) { BI.createWidget({ - type: "bi.center_adapt", + type: "bi.absolute_center_adapt", items: [{ - el: loadingAnimation + el: loadingEffect }], element: BI.Layers.make(this.getName(), this) }); } BI.Layers.show(self.getName()); } else if (BI.isNull(this._loading)) { - this._loading = loadingAnimation; + this._loading = loadingEffect; this._loading.element.css("zIndex", 1); BI.createWidget({ - type: "bi.absolute", + type: "bi.absolute_center_adapt", element: this, items: [{ el: this._loading, diff --git a/src/less/base/pane.less b/src/less/base/pane.less index 1e2246c58..8818dfb87 100644 --- a/src/less/base/pane.less +++ b/src/less/base/pane.less @@ -5,15 +5,15 @@ } .bi-loading-widget { - &>div { + div { .background-color(@background-color-highlight, 90%); .border-radius(2.5px); .animation(loading-widget 0.8s infinite linear); } - & .rect2 { + .rect2 { .animation-delay(-0.2s); } - & .rect3 { + .rect3 { .animation-delay(-0.4s); } .keyframes (loading-widget, { From 7eb5127bd4375cbd518f91b74dfb86af2e1777d6 Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Tue, 28 Aug 2018 20:19:00 +0800 Subject: [PATCH 6/7] =?UTF-8?q?BI-30745=20=E6=93=8D=E6=8E=A7class=E6=9D=A5?= =?UTF-8?q?=E5=AE=9E=E7=8E=B0ie=20hack?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/pane.js | 11 +++-------- src/less/base/pane.less | 10 ++++++++-- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/base/pane.js b/src/base/pane.js index 421f31273..515d9f99a 100644 --- a/src/base/pane.js +++ b/src/base/pane.js @@ -74,25 +74,20 @@ BI.Pane = BI.inherit(BI.Widget, { width: 5 }] }); - var loadingGif = BI.createWidget({ - type: "bi.layout", - cls: "loading-background", - height: 30 - }); - var loadingEffect = (BI.isIE() && BI.getIEVersion() < 10) ? loadingGif : loadingAnimation; + (BI.isIE() && BI.getIEVersion() < 10) && loadingAnimation.element.addClass("hack"); if (o.overlap === true) { if (!BI.Layers.has(this.getName())) { BI.createWidget({ type: "bi.absolute_center_adapt", items: [{ - el: loadingEffect + el: loadingAnimation }], element: BI.Layers.make(this.getName(), this) }); } BI.Layers.show(self.getName()); } else if (BI.isNull(this._loading)) { - this._loading = loadingEffect; + this._loading = loadingAnimation; this._loading.element.css("zIndex", 1); BI.createWidget({ type: "bi.absolute_center_adapt", diff --git a/src/less/base/pane.less b/src/less/base/pane.less index 8818dfb87..83ee3b595 100644 --- a/src/less/base/pane.less +++ b/src/less/base/pane.less @@ -1,4 +1,5 @@ @import "../index"; +@import "../resource/background"; .bi-pane { min-height: 25px; .background-color(@color-bi-background-normal, 0); @@ -17,12 +18,17 @@ .animation-delay(-0.4s); } .keyframes (loading-widget, { - 0%, - 100% { + 0%, 100% { .transform (scaleY(0.3)); } 50% { .transform (scaleY(1)); } }); + &.hack { + .loading-background; + div { + .background-color(@background-color-highlight, 0%); + } + } } \ No newline at end of file From 2d922779ba374f1b1435e323cdec2f8664b1bae7 Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Tue, 28 Aug 2018 21:06:43 +0800 Subject: [PATCH 7/7] =?UTF-8?q?BI-30745=20=E7=B2=BE=E7=AE=80=E8=AF=AD?= =?UTF-8?q?=E5=8F=A5=EF=BC=8C=E8=B0=83=E6=95=B4=E6=9C=80=E5=B0=8F=E9=AB=98?= =?UTF-8?q?=E5=BA=A6=EF=BC=88+30px=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/pane.js | 3 +-- src/less/base/pane.less | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/base/pane.js b/src/base/pane.js index 515d9f99a..ac78a8ba4 100644 --- a/src/base/pane.js +++ b/src/base/pane.js @@ -52,7 +52,7 @@ BI.Pane = BI.inherit(BI.Widget, { var self = this, o = this.options; var loadingAnimation = BI.createWidget({ type: "bi.horizontal", - cls: "bi-loading-widget", + cls: "bi-loading-widget" + ((BI.isIE() && BI.getIEVersion() < 10) ? " hack" : ""), height: 60, width: 60, hgap: 10, @@ -74,7 +74,6 @@ BI.Pane = BI.inherit(BI.Widget, { width: 5 }] }); - (BI.isIE() && BI.getIEVersion() < 10) && loadingAnimation.element.addClass("hack"); if (o.overlap === true) { if (!BI.Layers.has(this.getName())) { BI.createWidget({ diff --git a/src/less/base/pane.less b/src/less/base/pane.less index 83ee3b595..605d44bb8 100644 --- a/src/less/base/pane.less +++ b/src/less/base/pane.less @@ -1,7 +1,7 @@ @import "../index"; @import "../resource/background"; .bi-pane { - min-height: 25px; + min-height: 55px; .background-color(@color-bi-background-normal, 0); }