explain.js 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = void 0;
  6. const genFormValidateMotionStyle = token => {
  7. const {
  8. componentCls
  9. } = token;
  10. const helpCls = `${componentCls}-show-help`;
  11. const helpItemCls = `${componentCls}-show-help-item`;
  12. return {
  13. [helpCls]: {
  14. // Explain holder
  15. transition: `opacity ${token.motionDurationFast} ${token.motionEaseInOut}`,
  16. '&-appear, &-enter': {
  17. opacity: 0,
  18. '&-active': {
  19. opacity: 1
  20. }
  21. },
  22. '&-leave': {
  23. opacity: 1,
  24. '&-active': {
  25. opacity: 0
  26. }
  27. },
  28. // Explain
  29. [helpItemCls]: {
  30. overflow: 'hidden',
  31. transition: `height ${token.motionDurationFast} ${token.motionEaseInOut},
  32. opacity ${token.motionDurationFast} ${token.motionEaseInOut},
  33. transform ${token.motionDurationFast} ${token.motionEaseInOut} !important`,
  34. [`&${helpItemCls}-appear, &${helpItemCls}-enter`]: {
  35. transform: `translateY(-5px)`,
  36. opacity: 0,
  37. '&-active': {
  38. transform: 'translateY(0)',
  39. opacity: 1
  40. }
  41. },
  42. [`&${helpItemCls}-leave-active`]: {
  43. transform: `translateY(-5px)`
  44. }
  45. }
  46. }
  47. };
  48. };
  49. var _default = exports.default = genFormValidateMotionStyle;