explain.js 1.2 KB

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