1 | @triggerPrefixCls: rc-trigger-popup;
|
2 |
|
3 | .@{triggerPrefixCls} {
|
4 | position: absolute;
|
5 | left: -9999px;
|
6 | top: -9999px;
|
7 | z-index: 1050;
|
8 |
|
9 | &-hidden {
|
10 | display: none;
|
11 | }
|
12 |
|
13 | .effect() {
|
14 | animation-duration: 0.3s;
|
15 | animation-fill-mode: both;
|
16 | }
|
17 |
|
18 | &-zoom-enter,&-zoom-appear {
|
19 | opacity: 0;
|
20 | .effect();
|
21 | animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
22 | animation-play-state: paused;
|
23 | }
|
24 |
|
25 | &-zoom-leave {
|
26 | .effect();
|
27 | animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
|
28 | animation-play-state: paused;
|
29 | }
|
30 |
|
31 | &-zoom-enter&-zoom-enter-active, &-zoom-appear&-zoom-appear-active {
|
32 | animation-name: rcTriggerZoomIn;
|
33 | animation-play-state: running;
|
34 | }
|
35 |
|
36 | &-zoom-leave&-zoom-leave-active {
|
37 | animation-name: rcTriggerZoomOut;
|
38 | animation-play-state: running;
|
39 | }
|
40 |
|
41 | @keyframes rcTriggerZoomIn {
|
42 | 0% {
|
43 | opacity: 0;
|
44 | transform-origin: 50% 50%;
|
45 | transform: scale(0, 0);
|
46 | }
|
47 | 100% {
|
48 | opacity: 1;
|
49 | transform-origin: 50% 50%;
|
50 | transform: scale(1, 1);
|
51 | }
|
52 | }
|
53 | @keyframes rcTriggerZoomOut {
|
54 | 0% {
|
55 | opacity: 1;
|
56 | transform-origin: 50% 50%;
|
57 | transform: scale(1, 1);
|
58 | }
|
59 | 100% {
|
60 | opacity: 0;
|
61 | transform-origin: 50% 50%;
|
62 | transform: scale(0, 0);
|
63 | }
|
64 | }
|
65 | }
|
66 |
|
67 | @import "./index/Mask"; |
\ | No newline at end of file |