index.less 1.6 KB

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