Mask.less 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. .@{triggerPrefixCls} {
  2. &-mask {
  3. position: fixed;
  4. top: 0;
  5. right: 0;
  6. left: 0;
  7. bottom: 0;
  8. background-color: rgb(55, 55, 55);
  9. background-color: rgba(55, 55, 55, 0.6);
  10. height: 100%;
  11. filter: alpha(opacity=50);
  12. z-index: 1050;
  13. &-hidden {
  14. display: none;
  15. }
  16. }
  17. .fade-effect() {
  18. animation-duration: 0.3s;
  19. animation-fill-mode: both;
  20. animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
  21. }
  22. &-fade-enter,&-fade-appear {
  23. opacity: 0;
  24. .fade-effect();
  25. animation-play-state: paused;
  26. }
  27. &-fade-leave {
  28. .fade-effect();
  29. animation-play-state: paused;
  30. }
  31. &-fade-enter&-fade-enter-active,&-fade-appear&-fade-appear-active {
  32. animation-name: rcTriggerMaskFadeIn;
  33. animation-play-state: running;
  34. }
  35. &-fade-leave&-fade-leave-active {
  36. animation-name: rcDialogFadeOut;
  37. animation-play-state: running;
  38. }
  39. @keyframes rcTriggerMaskFadeIn {
  40. 0% {
  41. opacity: 0;
  42. }
  43. 100% {
  44. opacity: 1;
  45. }
  46. }
  47. @keyframes rcDialogFadeOut {
  48. 0% {
  49. opacity: 1;
  50. }
  51. 100% {
  52. opacity: 0;
  53. }
  54. }
  55. }