ant-design/components/style/core/motion/move.less

122 lines
2.0 KiB
Plaintext
Raw Normal View History

2015-07-01 17:25:16 +08:00
.move-motion(@className, @keyframeName) {
@name: ~'@{ant-prefix}-@{className}';
.make-motion(@name, @keyframeName);
.@{name}-enter,
.@{name}-appear {
2015-07-01 17:25:16 +08:00
opacity: 0;
2015-07-09 11:04:45 +08:00
animation-timing-function: @ease-out-circ;
2015-07-01 17:25:16 +08:00
}
.@{name}-leave {
2015-07-09 11:04:45 +08:00
animation-timing-function: @ease-in-circ;
2015-07-01 17:25:16 +08:00
}
}
2015-09-15 15:00:23 +08:00
.move-motion(move-up, antMoveUp);
.move-motion(move-down, antMoveDown);
.move-motion(move-left, antMoveLeft);
.move-motion(move-right, antMoveRight);
2015-07-01 17:25:16 +08:00
2015-09-15 15:00:23 +08:00
@keyframes antMoveDownIn {
2015-07-01 17:25:16 +08:00
0% {
transform: translateY(100%);
transform-origin: 0 0;
2015-07-01 17:25:16 +08:00
opacity: 0;
}
100% {
transform: translateY(0%);
transform-origin: 0 0;
2015-07-01 17:25:16 +08:00
opacity: 1;
}
}
2015-09-15 15:00:23 +08:00
@keyframes antMoveDownOut {
2015-07-01 17:25:16 +08:00
0% {
transform: translateY(0%);
transform-origin: 0 0;
2015-07-01 17:25:16 +08:00
opacity: 1;
}
100% {
transform: translateY(100%);
transform-origin: 0 0;
2015-07-01 17:25:16 +08:00
opacity: 0;
}
}
2015-09-15 15:00:23 +08:00
@keyframes antMoveLeftIn {
2015-07-01 17:25:16 +08:00
0% {
transform: translateX(-100%);
transform-origin: 0 0;
2015-07-01 17:25:16 +08:00
opacity: 0;
}
100% {
transform: translateX(0%);
transform-origin: 0 0;
2015-07-01 17:25:16 +08:00
opacity: 1;
}
}
2015-09-15 15:00:23 +08:00
@keyframes antMoveLeftOut {
2015-07-01 17:25:16 +08:00
0% {
transform: translateX(0%);
transform-origin: 0 0;
2015-07-01 17:25:16 +08:00
opacity: 1;
}
100% {
transform: translateX(-100%);
transform-origin: 0 0;
2015-07-01 17:25:16 +08:00
opacity: 0;
}
}
2015-09-15 15:00:23 +08:00
@keyframes antMoveRightIn {
2015-07-01 17:25:16 +08:00
0% {
transform: translateX(100%);
transform-origin: 0 0;
opacity: 0;
2015-07-01 17:25:16 +08:00
}
100% {
transform: translateX(0%);
transform-origin: 0 0;
opacity: 1;
2015-07-01 17:25:16 +08:00
}
}
2015-09-15 15:00:23 +08:00
@keyframes antMoveRightOut {
2015-07-01 17:25:16 +08:00
0% {
transform: translateX(0%);
transform-origin: 0 0;
2015-07-01 17:25:16 +08:00
opacity: 1;
}
100% {
transform: translateX(100%);
transform-origin: 0 0;
2015-07-01 17:25:16 +08:00
opacity: 0;
}
}
2015-09-15 15:00:23 +08:00
@keyframes antMoveUpIn {
2015-07-01 17:25:16 +08:00
0% {
transform: translateY(-100%);
transform-origin: 0 0;
2015-07-01 17:25:16 +08:00
opacity: 0;
}
100% {
transform: translateY(0%);
transform-origin: 0 0;
2015-07-01 17:25:16 +08:00
opacity: 1;
}
}
2015-09-15 15:00:23 +08:00
@keyframes antMoveUpOut {
2015-07-01 17:25:16 +08:00
0% {
transform: translateY(0%);
transform-origin: 0 0;
2015-07-01 17:25:16 +08:00
opacity: 1;
}
100% {
transform: translateY(-100%);
transform-origin: 0 0;
2015-07-01 17:25:16 +08:00
opacity: 0;
}
}