fade.js 870 B

12345678910111213141516171819202122232425262728293031323334353637
  1. import { Keyframes } from '@ant-design/cssinjs';
  2. import { initMotion } from './motion';
  3. export const fadeIn = new Keyframes('antFadeIn', {
  4. '0%': {
  5. opacity: 0
  6. },
  7. '100%': {
  8. opacity: 1
  9. }
  10. });
  11. export const fadeOut = new Keyframes('antFadeOut', {
  12. '0%': {
  13. opacity: 1
  14. },
  15. '100%': {
  16. opacity: 0
  17. }
  18. });
  19. export const initFadeMotion = (token, sameLevel = false) => {
  20. const {
  21. antCls
  22. } = token;
  23. const motionCls = `${antCls}-fade`;
  24. const sameLevelPrefix = sameLevel ? '&' : '';
  25. return [initMotion(motionCls, fadeIn, fadeOut, token.motionDurationMid, sameLevel), {
  26. [`
  27. ${sameLevelPrefix}${motionCls}-enter,
  28. ${sameLevelPrefix}${motionCls}-appear
  29. `]: {
  30. opacity: 0,
  31. animationTimingFunction: 'linear'
  32. },
  33. [`${sameLevelPrefix}${motionCls}-leave`]: {
  34. animationTimingFunction: 'linear'
  35. }
  36. }];
  37. };