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
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. 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); .fade-motion(bi-fade, biFade);
.keyframes(biFadeIn, { //.keyframes(biFadeIn, {
0% { // 0% {opacity: 0;}
opacity: 0; // 100% {opacity: 1;}
} //});
//
100% { //.keyframes(biFadeOut, {
opacity: 1; // 0% {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,114 +17,42 @@
.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% { // 0% {transform: translateY(100%);transform-origin: 0 0;opacity: 0;}
transform: translateY(100%); // 100% {transform: translateY(0%);transform-origin: 0 0;opacity: 1;}
transform-origin: 0 0; //});
opacity: 0; //
} //.keyframes(biMoveDownOut, {
// 0% {transform: translateY(0%);transform-origin: 0 0;opacity: 1;}
100% { // 100% {transform: translateY(100%);transform-origin: 0 0;opacity: 0;}
transform: translateY(0%); //});
transform-origin: 0 0; //
opacity: 1; //.keyframes(biMoveLeftIn, {
} // 0% {transform: translateX(-100%);transform-origin: 0 0;opacity: 0;}
}); // 100% {transform: translateX(0%);transform-origin: 0 0;opacity: 1;}
//});
.keyframes(biMoveDownOut, { //
0% { //.keyframes(biMoveLeftOut, {
transform: translateY(0%); // 0% {transform: translateX(0%);transform-origin: 0 0;opacity: 1;}
transform-origin: 0 0; // 100% {transform: translateX(-100%);transform-origin: 0 0;opacity: 0;}
opacity: 1; //});
} //
//.keyframes(biMoveRightIn, {
100% { // 0% {transform: translateX(100%);transform-origin: 0 0;opacity: 0;}
transform: translateY(100%); // 100% {transform: translateX(0%);transform-origin: 0 0;opacity: 1;}
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% { //
transform: translateX(-100%); //.keyframes(biMoveUpIn, {
transform-origin: 0 0; // 0% {transform: translateY(-100%);transform-origin: 0 0;opacity: 0;}
opacity: 0; // 100% {transform: translateY(0%);transform-origin: 0 0;opacity: 1;}
} //});
//
100% { //.keyframes(biMoveUpOut, {
transform: translateX(0%); // 0% {transform: translateY(0%);transform-origin: 0 0;opacity: 1;}
transform-origin: 0 0; // 100% {transform: translateY(-100%);transform-origin: 0 0;opacity: 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;
} // }
}); //});

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-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% { transform: scale(1); }
100% { transform: scale(0.2); opacity: 0; } // 100% { transform: scale(0.2); opacity: 0; }
}); //});
.keyframes(biZoomBigIn, { .keyframes(biZoomBigIn, {
0% { 0% {transform: scale(0.8);opacity: 0;}
transform: scale(0.8); 100% {transform: scale(1);opacity: 1;}
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}); });
.keyframes(biZoomBigOut, { .keyframes(biZoomBigOut, {
0% { 0% {transform: scale(1);}
transform: scale(1); 100% {transform: scale(0.8);opacity: 0;}
}
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, { //.keyframes(biZoomUpIn, {
0% { // 0% {
transform: scale(1); // transform: scale(0.8);
transform-origin: 50% 100%; // transform-origin: 50% 0%;
} // opacity: 0;
// }
100% { //
transform: scale(0.8); // 100% {
transform-origin: 50% 100%; // transform: scale(1);
opacity: 0; // 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