@import "../../style/common"; .modal{ position: absolute; top: 0; bottom: 0; right: 0; left: 0; overflow: hidden; z-index: 9999999999999999; } .modal-content{ width: 100%; height: 100%; } /* opacity 配置 */ .animate-opacity-show { opacity: 1; visibility: initial; } .animate-opacity-hide { opacity: 0; visibility: hidden; } /* scale 配置 */ .animate-scale-show { transform: scale(1); } .animate-scale-hide { transform: scale(0); } /* translateX 配置 */ .animate-translateX-show,.animate-translateXR-show { transform: translateX(0); } .animate-translateX-hide { transform: translateX(-100%); } /* translateXR 配置 */ .animate-translateXR-hide { transform: translateX(100%); } /* translateY 配置 */ .animate-translateX-show,.animate-translateYR-show { transform: translateY(0); } .animate-translateY-hide { transform: translateY(-100%); } /* translateYR 配置 */ .animate-translateYR-hide { transform: translateY(100%); } /* skew */ .animate-skew-show,.animate-skewR-show { transform: skew(0); } .animate-skew-hide { transform: skew(90deg); } /* skewR */ .animate-skewR-hide { transform: skew(-90deg); } /* skewY */ .animate-skewY-show,.animate-skewYR-show { transform: skewY(0); } .animate-skewY-hide { transform: skewY(90deg); } /* skewY */ .animate-skewYR-hide { transform: skewY(-90deg); } /* rotate */ .animate-rotate-show { transform: rotate(0); } .animate-rotate-hide { transform: rotate(360deg); } /* rotateX */ .animate-rotateX-show { transform: rotateX(0); } .animate-rotateX-hide { transform: rotateX(90deg); } /* rotateY */ .animate-rotateY-show { transform: rotateY(0); } .animate-rotateY-hide { transform: rotateY(90deg); }