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

180 lines
2.7 KiB
Plaintext
Raw Normal View History

.zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) {
@name: ~'@{ant-prefix}-@{className}';
.make-motion(@name, @keyframeName, @duration);
.@{name}-enter,
.@{name}-appear {
2015-08-27 12:22:49 +08:00
transform: scale(0); // need this by yiminghe
2019-02-03 09:02:46 +08:00
opacity: 0;
2015-08-27 12:22:49 +08:00
animation-timing-function: @ease-out-circ;
&-prepare {
transform: none;
}
2015-07-01 17:25:16 +08:00
}
.@{name}-leave {
2015-08-27 12:22:49 +08:00
animation-timing-function: @ease-in-out-circ;
2015-07-01 17:25:16 +08:00
}
}
// For Modal, Select choosen item
2015-09-15 15:00:23 +08:00
.zoom-motion(zoom, antZoom);
// For Popover, Popconfirm, Dropdown
2015-09-15 15:00:23 +08:00
.zoom-motion(zoom-big, antZoomBig);
2016-10-07 18:18:23 +08:00
// For Tooltip
.zoom-motion(zoom-big-fast, antZoomBig, @animation-duration-fast);
2016-10-07 18:18:23 +08:00
2015-09-15 15:00:23 +08:00
.zoom-motion(zoom-up, antZoomUp);
.zoom-motion(zoom-down, antZoomDown);
.zoom-motion(zoom-left, antZoomLeft);
.zoom-motion(zoom-right, antZoomRight);
2015-07-01 17:25:16 +08:00
2015-09-15 15:00:23 +08:00
@keyframes antZoomIn {
2015-07-01 17:25:16 +08:00
0% {
2016-06-27 16:40:11 +08:00
transform: scale(0.2);
opacity: 0;
2015-07-01 17:25:16 +08:00
}
2015-07-01 17:25:16 +08:00
100% {
2015-08-27 12:22:49 +08:00
transform: scale(1);
opacity: 1;
2015-07-01 17:25:16 +08:00
}
}
2015-09-15 15:00:23 +08:00
@keyframes antZoomOut {
2015-07-01 17:25:16 +08:00
0% {
2015-08-27 12:22:49 +08:00
transform: scale(1);
2015-07-01 17:25:16 +08:00
}
2015-07-01 17:25:16 +08:00
100% {
2016-06-27 16:40:11 +08:00
transform: scale(0.2);
opacity: 0;
2015-07-01 17:25:16 +08:00
}
}
2015-11-18 23:42:01 +08:00
2015-09-15 15:00:23 +08:00
@keyframes antZoomBigIn {
2015-09-11 14:02:00 +08:00
0% {
2018-12-07 16:17:45 +08:00
transform: scale(0.8);
opacity: 0;
2015-09-11 14:02:00 +08:00
}
2015-09-11 14:02:00 +08:00
100% {
transform: scale(1);
opacity: 1;
2015-09-11 14:02:00 +08:00
}
}
2015-09-15 15:00:23 +08:00
@keyframes antZoomBigOut {
2015-09-11 14:02:00 +08:00
0% {
transform: scale(1);
}
2015-09-11 14:02:00 +08:00
100% {
2018-12-07 16:17:45 +08:00
transform: scale(0.8);
opacity: 0;
2015-09-11 14:02:00 +08:00
}
}
2015-07-01 17:25:16 +08:00
2015-09-15 15:00:23 +08:00
@keyframes antZoomUpIn {
2015-07-01 17:25:16 +08:00
0% {
2018-12-07 16:17:45 +08:00
transform: scale(0.8);
transform-origin: 50% 0%;
opacity: 0;
2015-07-01 17:25:16 +08:00
}
2015-07-01 17:25:16 +08:00
100% {
2015-08-27 12:22:49 +08:00
transform: scale(1);
transform-origin: 50% 0%;
2015-07-01 17:25:16 +08:00
}
}
2015-09-15 15:00:23 +08:00
@keyframes antZoomUpOut {
2015-07-01 17:25:16 +08:00
0% {
2015-08-27 12:22:49 +08:00
transform: scale(1);
transform-origin: 50% 0%;
2015-07-01 17:25:16 +08:00
}
2015-07-01 17:25:16 +08:00
100% {
2018-12-07 16:17:45 +08:00
transform: scale(0.8);
transform-origin: 50% 0%;
opacity: 0;
2015-07-01 17:25:16 +08:00
}
}
2015-09-15 15:00:23 +08:00
@keyframes antZoomLeftIn {
2015-07-01 17:25:16 +08:00
0% {
2018-12-07 16:17:45 +08:00
transform: scale(0.8);
transform-origin: 0% 50%;
opacity: 0;
2015-07-01 17:25:16 +08:00
}
2015-07-01 17:25:16 +08:00
100% {
2015-08-27 12:22:49 +08:00
transform: scale(1);
transform-origin: 0% 50%;
2015-07-01 17:25:16 +08:00
}
}
2015-09-15 15:00:23 +08:00
@keyframes antZoomLeftOut {
2015-07-01 17:25:16 +08:00
0% {
2015-08-27 12:22:49 +08:00
transform: scale(1);
transform-origin: 0% 50%;
2015-07-01 17:25:16 +08:00
}
2015-07-01 17:25:16 +08:00
100% {
2018-12-07 16:17:45 +08:00
transform: scale(0.8);
transform-origin: 0% 50%;
opacity: 0;
2015-07-01 17:25:16 +08:00
}
}
2015-09-15 15:00:23 +08:00
@keyframes antZoomRightIn {
2015-07-01 17:25:16 +08:00
0% {
2018-12-07 16:17:45 +08:00
transform: scale(0.8);
transform-origin: 100% 50%;
opacity: 0;
2015-07-01 17:25:16 +08:00
}
2015-07-01 17:25:16 +08:00
100% {
2015-08-27 12:22:49 +08:00
transform: scale(1);
transform-origin: 100% 50%;
2015-07-01 17:25:16 +08:00
}
}
2015-09-15 15:00:23 +08:00
@keyframes antZoomRightOut {
2015-07-01 17:25:16 +08:00
0% {
2015-08-27 12:22:49 +08:00
transform: scale(1);
transform-origin: 100% 50%;
2015-07-01 17:25:16 +08:00
}
2015-07-01 17:25:16 +08:00
100% {
2018-12-07 16:17:45 +08:00
transform: scale(0.8);
transform-origin: 100% 50%;
opacity: 0;
2015-07-01 17:25:16 +08:00
}
}
2015-09-15 15:00:23 +08:00
@keyframes antZoomDownIn {
2015-07-01 17:25:16 +08:00
0% {
2018-12-07 16:17:45 +08:00
transform: scale(0.8);
transform-origin: 50% 100%;
opacity: 0;
2015-07-01 17:25:16 +08:00
}
2015-07-01 17:25:16 +08:00
100% {
2015-08-27 12:22:49 +08:00
transform: scale(1);
transform-origin: 50% 100%;
2015-07-01 17:25:16 +08:00
}
}
2015-09-15 15:00:23 +08:00
@keyframes antZoomDownOut {
2015-07-01 17:25:16 +08:00
0% {
2015-08-27 12:22:49 +08:00
transform: scale(1);
transform-origin: 50% 100%;
2015-07-01 17:25:16 +08:00
}
2015-07-01 17:25:16 +08:00
100% {
2018-12-07 16:17:45 +08:00
transform: scale(0.8);
transform-origin: 50% 100%;
opacity: 0;
2015-07-01 17:25:16 +08:00
}
2015-07-08 16:29:57 +08:00
}