motion.js 935 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. import { initSlideMotion } from '../../style/motion';
  2. const genMotionStyle = token => {
  3. const {
  4. componentCls,
  5. motionDurationSlow
  6. } = token;
  7. return [{
  8. [componentCls]: {
  9. [`${componentCls}-switch`]: {
  10. '&-appear, &-enter': {
  11. transition: 'none',
  12. '&-start': {
  13. opacity: 0
  14. },
  15. '&-active': {
  16. opacity: 1,
  17. transition: `opacity ${motionDurationSlow}`
  18. }
  19. },
  20. '&-leave': {
  21. position: 'absolute',
  22. transition: 'none',
  23. inset: 0,
  24. '&-start': {
  25. opacity: 1
  26. },
  27. '&-active': {
  28. opacity: 0,
  29. transition: `opacity ${motionDurationSlow}`
  30. }
  31. }
  32. }
  33. }
  34. },
  35. // Follow code may reuse in other components
  36. [initSlideMotion(token, 'slide-up'), initSlideMotion(token, 'slide-down')]];
  37. };
  38. export default genMotionStyle;