1
This commit is contained in:
+192
@@ -0,0 +1,192 @@
|
||||
.rc-trigger-popup {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
z-index: 1050;
|
||||
}
|
||||
.rc-trigger-popup-hidden {
|
||||
display: none;
|
||||
}
|
||||
.rc-trigger-popup-zoom-enter,
|
||||
.rc-trigger-popup-zoom-appear {
|
||||
opacity: 0;
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
.rc-trigger-popup-zoom-leave {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
|
||||
}
|
||||
.rc-trigger-popup-zoom-enter.rc-trigger-popup-zoom-enter-active,
|
||||
.rc-trigger-popup-zoom-appear.rc-trigger-popup-zoom-appear-active {
|
||||
animation-name: rcTriggerZoomIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
.rc-trigger-popup-zoom-leave.rc-trigger-popup-zoom-leave-active {
|
||||
animation-name: rcTriggerZoomOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
.rc-trigger-popup-arrow {
|
||||
z-index: 1;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
background: #000;
|
||||
border-radius: 100vw;
|
||||
box-shadow: 0 0 0 3px black;
|
||||
}
|
||||
@keyframes rcTriggerZoomIn {
|
||||
0% {
|
||||
transform: scale(0, 0);
|
||||
transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1, 1);
|
||||
transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes rcTriggerZoomOut {
|
||||
0% {
|
||||
transform: scale(1, 1);
|
||||
transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(0, 0);
|
||||
transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.rc-trigger-popup-unique-container {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid red;
|
||||
background: green;
|
||||
}
|
||||
.rc-trigger-popup-unique-container-hidden {
|
||||
display: none;
|
||||
}
|
||||
.rc-trigger-popup-unique-container-visible {
|
||||
transition: all 0.1s;
|
||||
}
|
||||
.rc-trigger-popup-unique-controlled {
|
||||
border-color: rgba(0, 0, 0, 0.01) !important;
|
||||
background: transparent !important;
|
||||
z-index: 1;
|
||||
}
|
||||
.rc-trigger-popup-motion-content-fade-appear {
|
||||
opacity: 0;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
|
||||
}
|
||||
.rc-trigger-popup-motion-content-fade-appear.rc-trigger-popup-motion-content-fade-appear-active {
|
||||
animation-name: rcTriggerFadeIn;
|
||||
}
|
||||
@keyframes rcTriggerFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.rc-trigger-popup-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: #373737;
|
||||
background-color: rgba(55, 55, 55, 0.6);
|
||||
height: 100%;
|
||||
filter: alpha(opacity=50);
|
||||
z-index: 1050;
|
||||
}
|
||||
.rc-trigger-popup-mask-hidden {
|
||||
display: none;
|
||||
}
|
||||
.rc-trigger-popup-fade-enter,
|
||||
.rc-trigger-popup-fade-appear {
|
||||
opacity: 0;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.rc-trigger-popup-fade-leave {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.rc-trigger-popup-fade-enter.rc-trigger-popup-fade-enter-active,
|
||||
.rc-trigger-popup-fade-appear.rc-trigger-popup-fade-appear-active {
|
||||
animation-name: rcTriggerMaskFadeIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
.rc-trigger-popup-fade-leave.rc-trigger-popup-fade-leave-active {
|
||||
animation-name: rcDialogFadeOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
@keyframes rcTriggerMaskFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes rcDialogFadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.rc-trigger-popup-mobile {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
}
|
||||
.rc-trigger-popup-mobile.raise-enter,
|
||||
.rc-trigger-popup-mobile.raise-appear {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
.rc-trigger-popup-mobile.raise-enter-active,
|
||||
.rc-trigger-popup-mobile.raise-appear-active {
|
||||
transition: all 0.3s;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.rc-trigger-popup-mobile.raise-leave {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.rc-trigger-popup-mobile.raise-leave-active {
|
||||
transition: all 0.3s;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
.rc-trigger-popup-mobile-mask.fade-enter,
|
||||
.rc-trigger-popup-mobile-mask.fade-appear {
|
||||
opacity: 0;
|
||||
}
|
||||
.rc-trigger-popup-mobile-mask.fade-enter-active,
|
||||
.rc-trigger-popup-mobile-mask.fade-appear-active {
|
||||
transition: all 0.3s;
|
||||
opacity: 1;
|
||||
}
|
||||
.rc-trigger-popup-mobile-mask.fade-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
.rc-trigger-popup-mobile-mask.fade-leave-active {
|
||||
transition: all 0.3s;
|
||||
opacity: 0;
|
||||
}
|
||||
+127
@@ -0,0 +1,127 @@
|
||||
@triggerPrefixCls: rc-trigger-popup;
|
||||
|
||||
.@{triggerPrefixCls} {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
z-index: 1050;
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.effect() {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
&-zoom-enter,
|
||||
&-zoom-appear {
|
||||
opacity: 0;
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
.effect();
|
||||
}
|
||||
|
||||
&-zoom-leave {
|
||||
.effect();
|
||||
animation-play-state: paused;
|
||||
animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
|
||||
}
|
||||
|
||||
&-zoom-enter&-zoom-enter-active,
|
||||
&-zoom-appear&-zoom-appear-active {
|
||||
animation-name: rcTriggerZoomIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-zoom-leave&-zoom-leave-active {
|
||||
animation-name: rcTriggerZoomOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
z-index: 1;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
background: #000;
|
||||
border-radius: 100vw;
|
||||
box-shadow: 0 0 0 3px black;
|
||||
}
|
||||
|
||||
@keyframes rcTriggerZoomIn {
|
||||
0% {
|
||||
transform: scale(0, 0);
|
||||
transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1, 1);
|
||||
transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes rcTriggerZoomOut {
|
||||
0% {
|
||||
transform: scale(1, 1);
|
||||
transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(0, 0);
|
||||
transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// =============== Unique Container ===============
|
||||
&-unique-container {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid red;
|
||||
background: green;
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-visible {
|
||||
transition: all 0.1s;
|
||||
}
|
||||
}
|
||||
|
||||
// Debug
|
||||
&-unique-controlled {
|
||||
border-color: rgba(0, 0, 0, 0.01) !important;
|
||||
background: transparent !important;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// Motion Content
|
||||
&-motion-content {
|
||||
// Fade motion
|
||||
&-fade-appear {
|
||||
opacity: 0;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
|
||||
}
|
||||
|
||||
&-fade-appear&-fade-appear-active {
|
||||
animation-name: rcTriggerFadeIn;
|
||||
}
|
||||
|
||||
@keyframes rcTriggerFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import './index/Mask';
|
||||
@import './index/Mobile';
|
||||
+65
@@ -0,0 +1,65 @@
|
||||
.@{triggerPrefixCls} {
|
||||
&-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: rgb(55, 55, 55);
|
||||
background-color: rgba(55, 55, 55, 0.6);
|
||||
height: 100%;
|
||||
filter: alpha(opacity=50);
|
||||
z-index: 1050;
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-effect() {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
|
||||
}
|
||||
|
||||
&-fade-enter,
|
||||
&-fade-appear {
|
||||
opacity: 0;
|
||||
.fade-effect();
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
&-fade-leave {
|
||||
.fade-effect();
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
&-fade-enter&-fade-enter-active,
|
||||
&-fade-appear&-fade-appear-active {
|
||||
animation-name: rcTriggerMaskFadeIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-fade-leave&-fade-leave-active {
|
||||
animation-name: rcDialogFadeOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes rcTriggerMaskFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rcDialogFadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
.@{triggerPrefixCls} {
|
||||
&-mobile {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
|
||||
// Motion
|
||||
&.raise {
|
||||
&-enter,
|
||||
&-appear {
|
||||
transform: translateY(100%);
|
||||
|
||||
&-active {
|
||||
transition: all 0.3s;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
&-leave {
|
||||
transform: translateY(0);
|
||||
|
||||
&-active {
|
||||
transition: all 0.3s;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mask
|
||||
&-mask {
|
||||
&.fade {
|
||||
&-enter,
|
||||
&-appear {
|
||||
opacity: 0;
|
||||
|
||||
&-active {
|
||||
transition: all 0.3s;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-leave {
|
||||
opacity: 1;
|
||||
|
||||
&-active {
|
||||
transition: all 0.3s;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user