motion.js 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. const initMotionCommon = duration => ({
  3. animationDuration: duration,
  4. animationFillMode: 'both'
  5. });
  6. // FIXME: origin less code seems same as initMotionCommon. Maybe we can safe remove
  7. const initMotionCommonLeave = duration => ({
  8. animationDuration: duration,
  9. animationFillMode: 'both'
  10. });
  11. export const initMotion = function (motionCls, inKeyframes, outKeyframes, duration) {
  12. let sameLevel = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
  13. const sameLevelPrefix = sameLevel ? '&' : '';
  14. return {
  15. [`
  16. ${sameLevelPrefix}${motionCls}-enter,
  17. ${sameLevelPrefix}${motionCls}-appear
  18. `]: _extends(_extends({}, initMotionCommon(duration)), {
  19. animationPlayState: 'paused'
  20. }),
  21. [`${sameLevelPrefix}${motionCls}-leave`]: _extends(_extends({}, initMotionCommonLeave(duration)), {
  22. animationPlayState: 'paused'
  23. }),
  24. [`
  25. ${sameLevelPrefix}${motionCls}-enter${motionCls}-enter-active,
  26. ${sameLevelPrefix}${motionCls}-appear${motionCls}-appear-active
  27. `]: {
  28. animationName: inKeyframes,
  29. animationPlayState: 'running'
  30. },
  31. [`${sameLevelPrefix}${motionCls}-leave${motionCls}-leave-active`]: {
  32. animationName: outKeyframes,
  33. animationPlayState: 'running',
  34. pointerEvents: 'none'
  35. }
  36. };
  37. };