163 lines
		
	
	
		
			2.7 KiB
		
	
	
	
		
			Plaintext
		
	
	
			
		
		
	
	
			163 lines
		
	
	
		
			2.7 KiB
		
	
	
	
		
			Plaintext
		
	
	
| .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;
 | |
|   }
 | |
|   .@{className}-leave {
 | |
|     animation-timing-function: @ease-in-out-circ;
 | |
|   }
 | |
| }
 | |
| 
 | |
| // For Modal, Select choosen item
 | |
| .zoom-motion(zoom, antZoom);
 | |
| // For Popover, Popconfirm, Dropdown
 | |
| .zoom-motion(zoom-big, antZoomBig);
 | |
| // For Tooltip
 | |
| .zoom-motion(zoom-big-fast, antZoomBig, @animation-duration-fast);
 | |
| 
 | |
| .zoom-motion(zoom-up, antZoomUp);
 | |
| .zoom-motion(zoom-down, antZoomDown);
 | |
| .zoom-motion(zoom-left, antZoomLeft);
 | |
| .zoom-motion(zoom-right, antZoomRight);
 | |
| 
 | |
| @keyframes antZoomIn {
 | |
|   0% {
 | |
|     transform: scale(0.2);
 | |
|     opacity: 0;
 | |
|   }
 | |
|   100% {
 | |
|     transform: scale(1);
 | |
|     opacity: 1;
 | |
|   }
 | |
| }
 | |
| 
 | |
| @keyframes antZoomOut {
 | |
|   0% {
 | |
|     transform: scale(1);
 | |
|   }
 | |
|   100% {
 | |
|     transform: scale(0.2);
 | |
|     opacity: 0;
 | |
|   }
 | |
| }
 | |
| 
 | |
| @keyframes antZoomBigIn {
 | |
|   0% {
 | |
|     transform: scale(0.8);
 | |
|     opacity: 0;
 | |
|   }
 | |
|   100% {
 | |
|     transform: scale(1);
 | |
|     opacity: 1;
 | |
|   }
 | |
| }
 | |
| 
 | |
| @keyframes antZoomBigOut {
 | |
|   0% {
 | |
|     transform: scale(1);
 | |
|   }
 | |
|   100% {
 | |
|     transform: scale(0.8);
 | |
|     opacity: 0;
 | |
|   }
 | |
| }
 | |
| 
 | |
| @keyframes antZoomUpIn {
 | |
|   0% {
 | |
|     transform: scale(0.8);
 | |
|     transform-origin: 50% 0%;
 | |
|     opacity: 0;
 | |
|   }
 | |
|   100% {
 | |
|     transform: scale(1);
 | |
|     transform-origin: 50% 0%;
 | |
|   }
 | |
| }
 | |
| 
 | |
| @keyframes antZoomUpOut {
 | |
|   0% {
 | |
|     transform: scale(1);
 | |
|     transform-origin: 50% 0%;
 | |
|   }
 | |
|   100% {
 | |
|     transform: scale(0.8);
 | |
|     transform-origin: 50% 0%;
 | |
|     opacity: 0;
 | |
|   }
 | |
| }
 | |
| 
 | |
| @keyframes antZoomLeftIn {
 | |
|   0% {
 | |
|     transform: scale(0.8);
 | |
|     transform-origin: 0% 50%;
 | |
|     opacity: 0;
 | |
|   }
 | |
|   100% {
 | |
|     transform: scale(1);
 | |
|     transform-origin: 0% 50%;
 | |
|   }
 | |
| }
 | |
| 
 | |
| @keyframes antZoomLeftOut {
 | |
|   0% {
 | |
|     transform: scale(1);
 | |
|     transform-origin: 0% 50%;
 | |
|   }
 | |
|   100% {
 | |
|     transform: scale(0.8);
 | |
|     transform-origin: 0% 50%;
 | |
|     opacity: 0;
 | |
|   }
 | |
| }
 | |
| 
 | |
| @keyframes antZoomRightIn {
 | |
|   0% {
 | |
|     transform: scale(0.8);
 | |
|     transform-origin: 100% 50%;
 | |
|     opacity: 0;
 | |
|   }
 | |
|   100% {
 | |
|     transform: scale(1);
 | |
|     transform-origin: 100% 50%;
 | |
|   }
 | |
| }
 | |
| 
 | |
| @keyframes antZoomRightOut {
 | |
|   0% {
 | |
|     transform: scale(1);
 | |
|     transform-origin: 100% 50%;
 | |
|   }
 | |
|   100% {
 | |
|     transform: scale(0.8);
 | |
|     transform-origin: 100% 50%;
 | |
|     opacity: 0;
 | |
|   }
 | |
| }
 | |
| 
 | |
| @keyframes antZoomDownIn {
 | |
|   0% {
 | |
|     transform: scale(0.8);
 | |
|     transform-origin: 50% 100%;
 | |
|     opacity: 0;
 | |
|   }
 | |
|   100% {
 | |
|     transform: scale(1);
 | |
|     transform-origin: 50% 100%;
 | |
|   }
 | |
| }
 | |
| 
 | |
| @keyframes antZoomDownOut {
 | |
|   0% {
 | |
|     transform: scale(1);
 | |
|     transform-origin: 50% 100%;
 | |
|   }
 | |
|   100% {
 | |
|     transform: scale(0.8);
 | |
|     transform-origin: 50% 100%;
 | |
|     opacity: 0;
 | |
|   }
 | |
| }
 |