Browse Source

BI-30745 对于css3的animation的浏览器兼容前缀问题,定义less

es6
Zhenfei.Li 6 years ago
parent
commit
b14c9524e8
  1. 41
      src/less/animation.less
  2. 38
      src/less/base/pane.less

41
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;
}

38
src/less/base/pane.less

@ -8,45 +8,21 @@
&>div { &>div {
.background-color(@background-color-highlight, 90%); .background-color(@background-color-highlight, 90%);
.border-radius(2.5px); .border-radius(2.5px);
-webkit-animation: loading-widget 0.8s infinite linear; .animation(loading-widget 0.8s infinite linear);
-moz-animation: loading-widget 0.8s infinite linear;
animation: loading-widget 0.8s infinite linear;
} }
& .rect2 { & .rect2 {
-webkit-animation-delay: -0.2s; .animation-delay(-0.2s);
-moz-animation-delay: -0.2s;
animation-delay: -0.2s;
} }
& .rect3 { & .rect3 {
-webkit-animation-delay: -0.4s; .animation-delay(-0.4s);
-moz-animation-delay: -0.4s;
animation-delay: -0.4s;
} }
@-webkit-keyframes loading-widget { .keyframes (loading-widget, {
0%, 0%,
100% { 100% {
-webkit-transform: scaleY(0.3); .transform (scaleY(0.3));
} }
50% { 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);
}
}
} }
Loading…
Cancel
Save