fineui/src/less/core/utils/motion/zoom.less

@import "../../../index.less";

.zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) {
  .make-motion(@className, @keyframeName, @duration);
  .@{className}-enter,
  .@{className}-appear {
    transform: scale(0); // need this by yiminghe
    opacity: 0;
    animation-timing-function: @ease-out-circ;

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

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

.zoom-motion(bi-zoom-up, biZoomUp);
.zoom-motion(bi-zoom-down, biZoomDown);
.zoom-motion(bi-zoom-left, biZoomLeft);
.zoom-motion(bi-zoom-right, biZoomRight);

.keyframes(biZoomIn, {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
});

.keyframes(biZoomOut, {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.2);
    opacity: 0;
  }
});

.keyframes(biZoomBigIn, {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
});

.keyframes(biZoomBigOut, {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.8);
    opacity: 0;
  }
});

.keyframes(biZoomUpIn, {
  0% {
    transform: scale(0.8);
    transform-origin: 50% 0%;
    opacity: 0;
  }

  100% {
    transform: scale(1);
    transform-origin: 50% 0%;
  }
});

.keyframes(biZoomUpOut, {
  0% {
    transform: scale(1);
    transform-origin: 50% 0%;
  }

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

.keyframes(biZoomLeftIn, {
  0% {
    transform: scale(0.8);
    transform-origin: 0% 50%;
    opacity: 0;
  }

  100% {
    transform: scale(1);
    transform-origin: 0% 50%;
  }
});

.keyframes(biZoomLeftOut, {
  0% {
    transform: scale(1);
    transform-origin: 0% 50%;
  }

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

.keyframes(biZoomRightIn, {
  0% {
    transform: scale(0.8);
    transform-origin: 100% 50%;
    opacity: 0;
  }

  100% {
    transform: scale(1);
    transform-origin: 100% 50%;
  }
});

.keyframes(biZoomRightOut, {
  0% {
    transform: scale(1);
    transform-origin: 100% 50%;
  }

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

.keyframes(biZoomDownIn, {
  0% {
    transform: scale(0.8);
    transform-origin: 50% 100%;
    opacity: 0;
  }

  100% {
    transform: scale(1);
    transform-origin: 50% 100%;
  }
});

.keyframes(biZoomDownOut, {
  0% {
    transform: scale(1);
    transform-origin: 50% 100%;
  }

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