You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.9 KiB
58 lines
1.9 KiB
@import "../../../index"; |
|
|
|
.move-motion(@className, @keyframeName) { |
|
.make-motion(@className, @keyframeName); |
|
.@{className}-enter, |
|
.@{className}-appear { |
|
opacity: 0; |
|
animation-timing-function: @ease-out-circ; |
|
} |
|
.@{className}-leave { |
|
animation-timing-function: @ease-in-circ; |
|
} |
|
} |
|
|
|
.move-motion(bi-move-up, biMoveUp); |
|
.move-motion(bi-move-down, biMoveDown); |
|
.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;} |
|
//});
|
|
|