Browse Source

Pull request #2387: 无JIRA任务 动画

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

* commit 'd5f832332b1f194a52012d1ed03ef1c4c3d545a4':
  动画
es6
guy 3 years ago
parent
commit
823b645986
  1. 8
      src/less/core/utils/motion/fade.less
  2. 32
      src/less/core/utils/motion/move.less
  3. 32
      src/less/core/utils/motion/slide.less
  4. 58
      src/less/core/utils/motion/zoom.less

8
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;
}
}
});

32
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;
}
}
});

32
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;
}
}
});

58
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;
}
}
});

Loading…
Cancel
Save