119 lines
2.3 KiB
Text
119 lines
2.3 KiB
Text
.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;
|
|
}
|
|
}
|