Mask.less 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  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,
  23. &-fade-appear {
  24. opacity: 0;
  25. .fade-effect();
  26. animation-play-state: paused;
  27. }
  28. &-fade-leave {
  29. .fade-effect();
  30. animation-play-state: paused;
  31. }
  32. &-fade-enter&-fade-enter-active,
  33. &-fade-appear&-fade-appear-active {
  34. animation-name: rcTriggerMaskFadeIn;
  35. animation-play-state: running;
  36. }
  37. &-fade-leave&-fade-leave-active {
  38. animation-name: rcDialogFadeOut;
  39. animation-play-state: running;
  40. }
  41. @keyframes rcTriggerMaskFadeIn {
  42. 0% {
  43. opacity: 0;
  44. }
  45. 100% {
  46. opacity: 1;
  47. }
  48. }
  49. @keyframes rcDialogFadeOut {
  50. 0% {
  51. opacity: 1;
  52. }
  53. 100% {
  54. opacity: 0;
  55. }
  56. }
  57. }