Browse Source

Pull request #2385: 无JIAR任务 chore: 优化一下

Merge in VISUAL/fineui from ~GUY/fineui:master to master

* commit 'a4f9a488d1e56de89d18e6c863f40ad0c5a8f4a9':
  先删掉
  upda
  update
  chore: 优化一下
  chore: 优化一下
es6
guy 3 years ago
parent
commit
0d30d552ca
  1. 5
      src/case/linersegment/button.linear.segment.js
  2. 7
      src/case/linersegment/linear.segment.js
  3. 8
      src/less/base/segment/button.segment.less
  4. 36
      src/less/core/utils/motion/fade.less
  5. 131
      src/less/core/utils/motion/move.less
  6. 131
      src/less/core/utils/motion/slide.less
  7. 181
      src/less/core/utils/motion/zoom.less

5
src/case/linersegment/button.linear.segment.js

@ -5,7 +5,7 @@ BI.LinearSegmentButton = BI.inherit(BI.BasicButton, {
once: true,
readonly: true,
hgap: 10,
height: 25
height: 24
},
render: function () {
@ -15,6 +15,7 @@ BI.LinearSegmentButton = BI.inherit(BI.BasicButton, {
type: "bi.label",
text: o.text,
height: o.height,
textHeight: o.height - 2,
value: o.value,
hgap: o.hgap,
ref: function () {
@ -51,4 +52,4 @@ BI.LinearSegmentButton = BI.inherit(BI.BasicButton, {
this.text.setText(text);
}
});
BI.shortcut("bi.linear_segment_button", BI.LinearSegmentButton);
BI.shortcut("bi.linear_segment_button", BI.LinearSegmentButton);

7
src/case/linersegment/linear.segment.js

@ -6,7 +6,7 @@ BI.LinearSegment = BI.inherit(BI.Widget, {
layouts: [{
type: "bi.center"
}],
height: 29
height: 30
},
render: function () {
@ -15,9 +15,10 @@ BI.LinearSegment = BI.inherit(BI.Widget, {
type: "bi.button_group",
items: BI.createItems(o.items, {
type: "bi.linear_segment_button",
height: o.height - 1
height: o.height
}),
layouts: o.layouts,
value: o.value,
listeners: [{
eventName: "__EVENT_CHANGE__",
action: function () {
@ -48,4 +49,4 @@ BI.LinearSegment = BI.inherit(BI.Widget, {
return this.buttonGroup.getValue();
}
});
BI.shortcut("bi.linear_segment", BI.LinearSegment);
BI.shortcut("bi.linear_segment", BI.LinearSegment);

8
src/less/base/segment/button.segment.less

@ -1,7 +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 0.3s);
}
}

36
src/less/core/utils/motion/fade.less

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

131
src/less/core/utils/motion/move.less

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

131
src/less/core/utils/motion/slide.less

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

181
src/less/core/utils/motion/zoom.less

@ -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;
}
}
Loading…
Cancel
Save