fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

chore: 优化一下

es6
guy 3 years ago
parent
9a7d6ec1e7
commit
0020ccbaae
4 changed files with 383 additions and 282 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified 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. 265
      src/less/core/utils/motion/zoom.less

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

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

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

@ -17,42 +17,114 @@
.move-motion(bi-move-left, biMoveLeft); .move-motion(bi-move-left, biMoveLeft);
.move-motion(bi-move-right, biMoveRight); .move-motion(bi-move-right, biMoveRight);
//.keyframes(biMoveDownIn, { .keyframes(biMoveDownIn, {
// 0% {transform: translateY(100%);transform-origin: 0 0;opacity: 0;} 0% {
// 100% {transform: translateY(0%);transform-origin: 0 0;opacity: 1;} transform: translateY(100%);
//}); transform-origin: 0 0;
// opacity: 0;
//.keyframes(biMoveDownOut, { }
// 0% {transform: translateY(0%);transform-origin: 0 0;opacity: 1;}
// 100% {transform: translateY(100%);transform-origin: 0 0;opacity: 0;} 100% {
//}); transform: translateY(0%);
// transform-origin: 0 0;
//.keyframes(biMoveLeftIn, { opacity: 1;
// 0% {transform: translateX(-100%);transform-origin: 0 0;opacity: 0;} }
// 100% {transform: translateX(0%);transform-origin: 0 0;opacity: 1;} });
//});
// .keyframes(biMoveDownOut, {
//.keyframes(biMoveLeftOut, { 0% {
// 0% {transform: translateX(0%);transform-origin: 0 0;opacity: 1;} transform: translateY(0%);
// 100% {transform: translateX(-100%);transform-origin: 0 0;opacity: 0;} transform-origin: 0 0;
//}); opacity: 1;
// }
//.keyframes(biMoveRightIn, {
// 0% {transform: translateX(100%);transform-origin: 0 0;opacity: 0;} 100% {
// 100% {transform: translateX(0%);transform-origin: 0 0;opacity: 1;} transform: translateY(100%);
//}); transform-origin: 0 0;
// opacity: 0;
//.keyframes(biMoveRightOut, { }
// 0% {transform: translateX(0%);transform-origin: 0 0;opacity: 1;} });
// 100% {transform: translateX(100%);transform-origin: 0 0;opacity: 0;}
//}); .keyframes(biMoveLeftIn, {
// 0% {
//.keyframes(biMoveUpIn, { transform: translateX(-100%);
// 0% {transform: translateY(-100%);transform-origin: 0 0;opacity: 0;} transform-origin: 0 0;
// 100% {transform: translateY(0%);transform-origin: 0 0;opacity: 1;} opacity: 0;
//}); }
//
//.keyframes(biMoveUpOut, { 100% {
// 0% {transform: translateY(0%);transform-origin: 0 0;opacity: 1;} transform: translateX(0%);
// 100% {transform: translateY(-100%);transform-origin: 0 0;opacity: 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-left, biSlideLeft);
.slide-motion(bi-slide-right, biSlideRight); .slide-motion(bi-slide-right, biSlideRight);
//.keyframes(biSlideUpIn, { .keyframes(biSlideUpIn, {
// 0% { 0% {
// transform: scaleY(0.8); transform: scaleY(0.8);
// transform-origin: 0% 0%; transform-origin: 0% 0%;
// opacity: 0; opacity: 0;
// } }
//
// 100% { 100% {
// transform: scaleY(1); transform: scaleY(1);
// transform-origin: 0% 0%; transform-origin: 0% 0%;
// opacity: 1; opacity: 1;
// } }
//}); });
//
//.keyframes(biSlideUpOut, { .keyframes(biSlideUpOut, {
// 0% { 0% {
// transform: scaleY(1); transform: scaleY(1);
// transform-origin: 0% 0%; transform-origin: 0% 0%;
// opacity: 1; opacity: 1;
// } }
//
// 100% { 100% {
// transform: scaleY(0.8); transform: scaleY(0.8);
// transform-origin: 0% 0%; transform-origin: 0% 0%;
// opacity: 0; opacity: 0;
// } }
//}); });
//
//.keyframes(biSlideDownIn, { .keyframes(biSlideDownIn, {
// 0% { 0% {
// transform: scaleY(0.8); transform: scaleY(0.8);
// transform-origin: 100% 100%; transform-origin: 100% 100%;
// opacity: 0; opacity: 0;
// } }
//
// 100% { 100% {
// transform: scaleY(1); transform: scaleY(1);
// transform-origin: 100% 100%; transform-origin: 100% 100%;
// opacity: 1; opacity: 1;
// } }
//}); });
//
//.keyframes(biSlideDownOut, { .keyframes(biSlideDownOut, {
// 0% { 0% {
// transform: scaleY(1); transform: scaleY(1);
// transform-origin: 100% 100%; transform-origin: 100% 100%;
// opacity: 1; opacity: 1;
// } }
//
// 100% { 100% {
// transform: scaleY(0.8); transform: scaleY(0.8);
// transform-origin: 100% 100%; transform-origin: 100% 100%;
// opacity: 0; opacity: 0;
// } }
//}); });
//
//.keyframes(biSlideLeftIn, { .keyframes(biSlideLeftIn, {
// 0% { 0% {
// transform: scaleX(0.8); transform: scaleX(0.8);
// transform-origin: 0% 0%; transform-origin: 0% 0%;
// opacity: 0; opacity: 0;
// } }
//
// 100% { 100% {
// transform: scaleX(1); transform: scaleX(1);
// transform-origin: 0% 0%; transform-origin: 0% 0%;
// opacity: 1; opacity: 1;
// } }
//}); });
//
//.keyframes(biSlideLeftOut, { .keyframes(biSlideLeftOut, {
// 0% { 0% {
// transform: scaleX(1); transform: scaleX(1);
// transform-origin: 0% 0%; transform-origin: 0% 0%;
// opacity: 1; opacity: 1;
// } }
//
// 100% { 100% {
// transform: scaleX(0.8); transform: scaleX(0.8);
// transform-origin: 0% 0%; transform-origin: 0% 0%;
// opacity: 0; opacity: 0;
// } }
//}); });
//
//.keyframes(biSlideRightIn, { .keyframes(biSlideRightIn, {
// 0% { 0% {
// transform: scaleX(0.8); transform: scaleX(0.8);
// transform-origin: 100% 0%; transform-origin: 100% 0%;
// opacity: 0; opacity: 0;
// } }
//
// 100% { 100% {
// transform: scaleX(1); transform: scaleX(1);
// transform-origin: 100% 0%; transform-origin: 100% 0%;
// opacity: 1; opacity: 1;
// } }
//}); });
//
//.keyframes(biSlideRightOut, { .keyframes(biSlideRightOut, {
// 0% { 0% {
// transform: scaleX(1); transform: scaleX(1);
// transform-origin: 100% 0%; transform-origin: 100% 0%;
// opacity: 1; opacity: 1;
// } }
//
// 100% { 100% {
// transform: scaleX(0.8); transform: scaleX(0.8);
// transform-origin: 100% 0%; transform-origin: 100% 0%;
// opacity: 0; opacity: 0;
// } }
//}); });

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

@ -29,133 +29,152 @@
.zoom-motion(bi-zoom-left, biZoomLeft); .zoom-motion(bi-zoom-left, biZoomLeft);
.zoom-motion(bi-zoom-right, biZoomRight); .zoom-motion(bi-zoom-right, biZoomRight);
//.keyframes(biZoomIn, { .keyframes(biZoomIn, {
// 0% { 0% {
// transform: scale(0.2); transform: scale(0.2);
// opacity: 0; opacity: 0;
// } }
//
// 100% { 100% {
// transform: scale(1); transform: scale(1);
// opacity: 1; opacity: 1;
// } }
//}); });
//
//.keyframes(biZoomOut, { .keyframes(biZoomOut, {
// 0% { transform: scale(1); } 0% {
// 100% { transform: scale(0.2); opacity: 0; } transform: scale(1);
//}); }
100% {
transform: scale(0.2);
opacity: 0;
}
});
.keyframes(biZoomBigIn, { .keyframes(biZoomBigIn, {
0% {transform: scale(0.8);opacity: 0;} 0% {
100% {transform: scale(1);opacity: 1;} transform: scale(0.8);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}); });
.keyframes(biZoomBigOut, { .keyframes(biZoomBigOut, {
0% {transform: scale(1);} 0% {
100% {transform: scale(0.8);opacity: 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(biZoomUpIn, { .keyframes(biZoomLeftOut, {
// 0% { 0% {
// transform: scale(0.8); transform: scale(1);
// transform-origin: 50% 0%; transform-origin: 0% 50%;
// opacity: 0; }
// }
// 100% {
// 100% { transform: scale(0.8);
// transform: scale(1); transform-origin: 0% 50%;
// transform-origin: 50% 0%; opacity: 0;
// } }
//}); });
//
//.keyframes(biZoomUpOut, { .keyframes(biZoomRightIn, {
// 0% { 0% {
// transform: scale(1); transform: scale(0.8);
// transform-origin: 50% 0%; transform-origin: 100% 50%;
// } opacity: 0;
// }
// 100% {
// transform: scale(0.8); 100% {
// transform-origin: 50% 0%; transform: scale(1);
// opacity: 0; transform-origin: 100% 50%;
// } }
//}); });
//
//.keyframes(biZoomLeftIn, { .keyframes(biZoomRightOut, {
// 0% { 0% {
// transform: scale(0.8); transform: scale(1);
// transform-origin: 0% 50%; transform-origin: 100% 50%;
// opacity: 0; }
// }
// 100% {
// 100% { transform: scale(0.8);
// transform: scale(1); transform-origin: 100% 50%;
// transform-origin: 0% 50%; opacity: 0;
// } }
//}); });
//
//.keyframes(biZoomLeftOut, { .keyframes(biZoomDownIn, {
// 0% { 0% {
// transform: scale(1); transform: scale(0.8);
// transform-origin: 0% 50%; transform-origin: 50% 100%;
// } opacity: 0;
// }
// 100% {
// transform: scale(0.8); 100% {
// transform-origin: 0% 50%; transform: scale(1);
// opacity: 0; transform-origin: 50% 100%;
// } }
//}); });
//
//.keyframes(biZoomRightIn, { .keyframes(biZoomDownOut, {
// 0% { 0% {
// transform: scale(0.8); transform: scale(1);
// transform-origin: 100% 50%; transform-origin: 50% 100%;
// opacity: 0; }
// }
// 100% {
// 100% { transform: scale(0.8);
// transform: scale(1); transform-origin: 50% 100%;
// transform-origin: 100% 50%; opacity: 0;
// } }
//}); });
//
//.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