Browse Source

Merge pull request #642 in VISUAL/fineui from ~ZHENFEI.LI/fineui:master to master

* commit '2d922779ba374f1b1435e323cdec2f8664b1bae7':
  BI-30745 精简语句,调整最小高度(+30px)
  BI-30745 操控class来实现ie hack
  BI-30745 使用js判断是否ie来兼容低版本ie
  BI-30745 将css animation相关的less mixin移到visual.less文件中
  BI-30745 对于css3的animation的浏览器兼容前缀问题,定义less
  BI-30745 根据caniuse网站查询的兼容性,增加浏览器兼容前缀
  替换gif,使用css animation实现组件loading加载动画
es6
Zhenfei.Li 6 years ago
parent
commit
6ac9a706ca
  1. 40
      src/base/pane.js
  2. 34
      src/less/base/pane.less
  3. 43
      src/less/visual.less

40
src/base/pane.js

@ -50,30 +50,46 @@ BI.Pane = BI.inherit(BI.Widget, {
loading: function () { loading: function () {
var self = this, o = this.options; var self = this, o = this.options;
var loadingAnimation = BI.createWidget({
type: "bi.horizontal",
cls: "bi-loading-widget" + ((BI.isIE() && BI.getIEVersion() < 10) ? " hack" : ""),
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 (o.overlap === true) {
if (!BI.Layers.has(this.getName())) { if (!BI.Layers.has(this.getName())) {
BI.createWidget({ BI.createWidget({
type: "bi.vtape", type: "bi.absolute_center_adapt",
items: [{ items: [{
el: { el: loadingAnimation
type: "bi.layout",
cls: "loading-background"
},
height: 30
}], }],
element: BI.Layers.make(this.getName(), this) element: BI.Layers.make(this.getName(), this)
}); });
} }
BI.Layers.show(self.getName()); BI.Layers.show(self.getName());
} else if (BI.isNull(this._loading)) { } else if (BI.isNull(this._loading)) {
this._loading = BI.createWidget({ this._loading = loadingAnimation;
type: "bi.layout",
cls: "loading-background",
height: 30
});
this._loading.element.css("zIndex", 1); this._loading.element.css("zIndex", 1);
BI.createWidget({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute_center_adapt",
element: this, element: this,
items: [{ items: [{
el: this._loading, el: this._loading,

34
src/less/base/pane.less

@ -1,6 +1,34 @@
@import "../index"; @import "../index";
@import "../resource/background";
.bi-pane { .bi-pane {
min-height: 25px; min-height: 55px;
.background-color(@color-bi-background-normal, 0); .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));
}
});
&.hack {
.loading-background;
div {
.background-color(@background-color-highlight, 0%);
}
}
} }

43
src/less/visual.less

@ -254,4 +254,47 @@
content: ""; content: "";
transform: rotate(-45deg); 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;
} }
Loading…
Cancel
Save