drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

empty master

Browse source
This commit is contained in:
梁灏 2019-08-27 09:37:17 +08:00
parent 92c1162255
commit 67d534df27
276 changed files with 0 additions and 28368 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/styles/animation/ease.less
View file

@ -1,36 +0,0 @@
.ease-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName);
.@{className}-enter, .@{className}-appear {
opacity: 0;
animation-timing-function: linear;
animation-duration: @transition-time;
}
.@{className}-leave {
animation-timing-function: linear;
animation-duration: @transition-time;
}
}
.ease-motion(ease, ivuEase);
@keyframes ivuEaseIn {
0% {
opacity: 0;
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes ivuEaseOut {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.9);
}
}

30
src/styles/animation/fade.less
View file

@ -1,30 +0,0 @@
.fade-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName);
.@{className}-enter, .@{className}-appear {
opacity: 0;
animation-timing-function: linear;
}
.@{className}-leave {
animation-timing-function: linear;
}
}
.fade-motion(fade, ivuFade);
@keyframes ivuFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes ivuFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

28
src/styles/animation/index.less
View file

@ -1,28 +0,0 @@
.motion-common() {
animation-duration: @animation-time;
animation-fill-mode: both;
}
.make-motion(@className, @keyframeName) {
.@{className}-enter, .@{className}-appear {
.motion-common();
animation-play-state: paused;
}
.@{className}-leave {
.motion-common();
animation-play-state: paused;
}
.@{className}-enter, .@{className}-appear {
animation-name: ~"@{keyframeName}In";
animation-play-state: running;
}
.@{className}-leave {
animation-name: ~"@{keyframeName}Out";
animation-play-state: running;
}
}
@import "fade";
@import "move";
@import "ease";
@import "slide";

161
src/styles/animation/move.less
View file

@ -1,161 +0,0 @@
.move-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName);
.@{className}-enter, .@{className}-appear {
opacity: 0;
animation-timing-function: @ease-in-out;
}
.@{className}-leave {
animation-timing-function: @ease-in-out;
}
}
.move-motion(move-up, ivuMoveUp);
.move-motion(move-down, ivuMoveDown);
.move-motion(move-left, ivuMoveLeft);
.move-motion(move-right, ivuMoveRight);
@keyframes ivuMoveDownIn {
0% {
transform-origin: 0 0;
transform: translateY(100%);
opacity: 0;
}
100% {
transform-origin: 0 0;
transform: translateY(0%);
opacity: 1;
}
}
@keyframes ivuMoveDownOut {
0% {
transform-origin: 0 0;
transform: translateY(0%);
opacity: 1;
}
100% {
transform-origin: 0 0;
transform: translateY(100%);
opacity: 0;
}
}
@keyframes ivuMoveLeftIn {
0% {
transform-origin: 0 0;
transform: translateX(-100%);
opacity: 0;
}
100% {
transform-origin: 0 0;
transform: translateX(0%);
opacity: 1;
}
}
@keyframes ivuMoveLeftOut {
0% {
transform-origin: 0 0;
transform: translateX(0%);
opacity: 1;
}
100% {
transform-origin: 0 0;
transform: translateX(-100%);
opacity: 0;
}
}
@keyframes ivuMoveRightIn {
0% {
opacity: 0;
transform-origin: 0 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform-origin: 0 0;
transform: translateX(0%);
}
}
@keyframes ivuMoveRightOut {
0% {
transform-origin: 0 0;
transform: translateX(0%);
opacity: 1;
}
100% {
transform-origin: 0 0;
transform: translateX(100%);
opacity: 0;
}
}
@keyframes ivuMoveUpIn {
0% {
transform-origin: 0 0;
transform: translateY(-100%);
opacity: 0;
}
100% {
transform-origin: 0 0;
transform: translateY(0%);
opacity: 1;
}
}
@keyframes ivuMoveUpOut {
0% {
transform-origin: 0 0;
transform: translateY(0%);
opacity: 1;
}
100% {
transform-origin: 0 0;
transform: translateY(-100%);
opacity: 0;
}
}
// specific transition for Notice
.move-motion(move-notice, ivuMoveNotice);
@import '../components/notice.less';
@keyframes ivuMoveNoticeIn {
0% {
opacity: 0;
transform-origin: 0 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform-origin: 0 0;
transform: translateX(0%);
}
}
@keyframes ivuMoveNoticeOut {
0% {
transform-origin: 0 0;
transform: translateX(0%);
opacity: 1;
}
70% {
transform-origin: 0 0;
transform: translateX(100%);
height: auto;
padding: @notice-padding;
margin-bottom: @notice-margin-bottom;
opacity: 0;
}
100% {
transform-origin: 0 0;
transform: translateX(100%);
height: 0;
padding: 0;
margin-bottom: 0;
opacity: 0;
}
}

119
src/styles/animation/slide.less
View file

@ -1,119 +0,0 @@
.slide-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName);
.@{className}-enter, .@{className}-appear {
opacity: 0;
animation-timing-function: @ease-in-out;
}
.@{className}-leave {
animation-timing-function: @ease-in-out;
}
}
.slide-motion(slide-up, ivuSlideUp);
.slide-motion(slide-down, ivuSlideDown);
.slide-motion(slide-left, ivuSlideLeft);
.slide-motion(slide-right, ivuSlideRight);
@keyframes ivuSlideUpIn {
0% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(.8);
}
100% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
}
@keyframes ivuSlideUpOut {
0% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
100% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(.8);
}
}
@keyframes ivuSlideDownIn {
0% {
opacity: 0;
transform-origin: 100% 100%;
transform: scaleY(.8);
}
100% {
opacity: 1;
transform-origin: 100% 100%;
transform: scaleY(1);
}
}
@keyframes ivuSlideDownOut {
0% {
opacity: 1;
transform-origin: 100% 100%;
transform: scaleY(1);
}
100% {
opacity: 0;
transform-origin: 100% 100%;
transform: scaleY(.8);
}
}
@keyframes ivuSlideLeftIn {
0% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleX(.8);
}
100% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleX(1);
}
}
@keyframes ivuSlideLeftOut {
0% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleX(1);
}
100% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleX(.8);
}
}
@keyframes ivuSlideRightIn {
0% {
opacity: 0;
transform-origin: 100% 0%;
transform: scaleX(.8);
}
100% {
opacity: 1;
transform-origin: 100% 0%;
transform: scaleX(1);
}
}
@keyframes ivuSlideRightOut {
0% {
opacity: 1;
transform-origin: 100% 0%;
transform: scaleX(1);
}
100% {
opacity: 0;
transform-origin: 100% 0%;
transform: scaleX(.8);
}
}