acud/es/style/core/motion/zoom.less

acg react 组件库

.zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) {
    @name: ~'@{acud-prefix}-@{className}';
    .make-motion(@name, @keyframeName, @duration);
    .@{name}-enter,
    .@{name}-appear {
        transform: scale(0);
        opacity: 0;
        animation-timing-function: @ease-out-circ;

        &-prepare {
            transform: none;
        }
    }
    .@{name}-leave {
        animation-timing-function: @ease-in-out-circ;
    }
}

// For Modal, Select choosen item
.zoom-motion(zoom, acudZoom);
// For Popover, Popconfirm, Dropdown
.zoom-motion(zoom-big, acudZoomBig);
// For Tooltip
.zoom-motion(zoom-big-fast, acudZoomBig, @animation-duration-fast);

.zoom-motion(zoom-up, acudZoomUp);
.zoom-motion(zoom-down, acudZoomDown);
.zoom-motion(zoom-left, acudZoomLeft);
.zoom-motion(zoom-right, acudZoomRight);

@keyframes acudZoomIn {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes acudZoomOut {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.2);
        opacity: 0;
    }
}

@keyframes acudZoomBigIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes acudZoomBigOut {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.8);
        opacity: 0;
    }
}

@keyframes acudZoomUpIn {
    0% {
        transform: scale(0.8);
        transform-origin: 50% 0%;
        opacity: 0;
    }
    100% {
        transform: scale(1);
        transform-origin: 50% 0%;
    }
}

@keyframes acudZoomUpOut {
    0% {
        transform: scale(1);
        transform-origin: 50% 0%;
    }
    100% {
        transform: scale(0.8);
        transform-origin: 50% 0%;
        opacity: 0;
    }
}

@keyframes acudZoomLeftIn {
    0% {
        transform: scale(0.8);
        transform-origin: 0% 50%;
        opacity: 0;
    }
    100% {
        transform: scale(1);
        transform-origin: 0% 50%;
    }
}

@keyframes acudZoomLeftOut {
    0% {
        transform: scale(1);
        transform-origin: 0% 50%;
    }
    100% {
        transform: scale(0.8);
        transform-origin: 0% 50%;
        opacity: 0;
    }
}

@keyframes acudZoomRightIn {
    0% {
        transform: scale(0.8);
        transform-origin: 100% 50%;
        opacity: 0;
    }
    100% {
        transform: scale(1);
        transform-origin: 100% 50%;
    }
}

@keyframes acudZoomRightOut {
    0% {
        transform: scale(1);
        transform-origin: 100% 50%;
    }
    100% {
        transform: scale(0.8);
        transform-origin: 100% 50%;
        opacity: 0;
    }
}

@keyframes acudZoomDownIn {
    0% {
        transform: scale(0.8);
        transform-origin: 50% 100%;
        opacity: 0;
    }
    100% {
        transform: scale(1);
        transform-origin: 50% 100%;
    }
}

@keyframes acudZoomDownOut {
    0% {
        transform: scale(1);
        transform-origin: 50% 100%;
    }
    100% {
        transform: scale(0.8);
        transform-origin: 50% 100%;
        opacity: 0;
    }
}