Frank
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

chore: 优化一下

es6
guy 3 years ago
parent
823b645986
commit
b32ecccaa6
4 changed files with 282 additions and 377 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 28
      src/less/core/utils/motion/fade.less
  2. 150
      src/less/core/utils/motion/move.less
  3. 222
      src/less/core/utils/motion/slide.less
  4. 259
      src/less/core/utils/motion/zoom.less

28
src/less/core/utils/motion/fade.less
Unescape View File

@ -14,22 +14,12 @@
.fade-motion(bi-fade, biFade);
.keyframes(biFadeIn, {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
});
.keyframes(biFadeOut, {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
});
//.keyframes(biFadeIn, {
// 0% {opacity: 0;}
// 100% {opacity: 1;}
//});
//
//.keyframes(biFadeOut, {
// 0% {opacity: 1;}
// 100% {opacity: 0;}
//});

150
src/less/core/utils/motion/move.less
Unescape View File

@ -17,114 +17,42 @@
.move-motion(bi-move-left, biMoveLeft);
.move-motion(bi-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;
}
});
//.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;}
//});

222
src/less/core/utils/motion/slide.less
Unescape View File

@ -17,114 +17,114 @@
.slide-motion(bi-slide-left, biSlideLeft);
.slide-motion(bi-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;
}
});
//.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;
// }
//});

259
src/less/core/utils/motion/zoom.less
Unescape View File

@ -29,146 +29,133 @@
.zoom-motion(bi-zoom-left, biZoomLeft);
.zoom-motion(bi-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(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;
}
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;
}
0% {transform: scale(1);}
100% {transform: scale(0.8);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;
}
});
//.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;
// }
//});

Write Preview
Loading…
Cancel
Save