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

122 lines
2.0 KiB
Plaintext
Raw Normal View History

2017-10-26 07:18:08 +00:00
.move-motion(@className, @keyframeName) {
2021-05-23 13:49:35 +00:00
@name: ~'@{ant-prefix}-@{className}';
.make-motion(@name, @keyframeName);
.@{name}-enter,
.@{name}-appear {
2017-10-26 07:18:08 +00:00
opacity: 0;
animation-timing-function: @ease-out-circ;
}
2021-05-23 13:49:35 +00:00
.@{name}-leave {
2017-10-26 07:18:08 +00:00
animation-timing-function: @ease-in-circ;
}
}
.move-motion(move-up, antMoveUp);
.move-motion(move-down, antMoveDown);
.move-motion(move-left, antMoveLeft);
.move-motion(move-right, antMoveRight);
@keyframes antMoveDownIn {
0% {
transform: translateY(100%);
2019-03-07 01:37:54 +00:00
transform-origin: 0 0;
2017-10-26 07:18:08 +00:00
opacity: 0;
}
100% {
transform: translateY(0%);
2019-03-07 01:37:54 +00:00
transform-origin: 0 0;
2017-10-26 07:18:08 +00:00
opacity: 1;
}
}
@keyframes antMoveDownOut {
0% {
transform: translateY(0%);
2019-03-07 01:37:54 +00:00
transform-origin: 0 0;
2017-10-26 07:18:08 +00:00
opacity: 1;
}
100% {
transform: translateY(100%);
2019-03-07 01:37:54 +00:00
transform-origin: 0 0;
2017-10-26 07:18:08 +00:00
opacity: 0;
}
}
@keyframes antMoveLeftIn {
0% {
transform: translateX(-100%);
2019-03-07 01:37:54 +00:00
transform-origin: 0 0;
2017-10-26 07:18:08 +00:00
opacity: 0;
}
100% {
transform: translateX(0%);
2019-03-07 01:37:54 +00:00
transform-origin: 0 0;
2017-10-26 07:18:08 +00:00
opacity: 1;
}
}
@keyframes antMoveLeftOut {
0% {
transform: translateX(0%);
2019-03-07 01:37:54 +00:00
transform-origin: 0 0;
2017-10-26 07:18:08 +00:00
opacity: 1;
}
100% {
transform: translateX(-100%);
2019-03-07 01:37:54 +00:00
transform-origin: 0 0;
2017-10-26 07:18:08 +00:00
opacity: 0;
}
}
@keyframes antMoveRightIn {
0% {
transform: translateX(100%);
2019-03-07 01:37:54 +00:00
transform-origin: 0 0;
opacity: 0;
2017-10-26 07:18:08 +00:00
}
100% {
transform: translateX(0%);
2019-03-07 01:37:54 +00:00
transform-origin: 0 0;
opacity: 1;
2017-10-26 07:18:08 +00:00
}
}
@keyframes antMoveRightOut {
0% {
transform: translateX(0%);
2019-03-07 01:37:54 +00:00
transform-origin: 0 0;
2017-10-26 07:18:08 +00:00
opacity: 1;
}
100% {
transform: translateX(100%);
2019-03-07 01:37:54 +00:00
transform-origin: 0 0;
2017-10-26 07:18:08 +00:00
opacity: 0;
}
}
@keyframes antMoveUpIn {
0% {
transform: translateY(-100%);
2019-03-07 01:37:54 +00:00
transform-origin: 0 0;
2017-10-26 07:18:08 +00:00
opacity: 0;
}
100% {
transform: translateY(0%);
2019-03-07 01:37:54 +00:00
transform-origin: 0 0;
2017-10-26 07:18:08 +00:00
opacity: 1;
}
}
@keyframes antMoveUpOut {
0% {
transform: translateY(0%);
2019-03-07 01:37:54 +00:00
transform-origin: 0 0;
2017-10-26 07:18:08 +00:00
opacity: 1;
}
100% {
transform: translateY(-100%);
2019-03-07 01:37:54 +00:00
transform-origin: 0 0;
2017-10-26 07:18:08 +00:00
opacity: 0;
}
}