scaleInX.js 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. import { isTranspose } from '../utils/coordinate';
  2. import { effectTiming } from './utils';
  3. /**
  4. * Scale mark from nothing to desired shape in x direction.
  5. */
  6. export const ScaleInX = (options) => {
  7. // Small enough to hide or show very small part of mark,
  8. // but bigger enough to not cause bug.
  9. const ZERO = 0.0001;
  10. return (from, to, value, coordinate, defaults) => {
  11. const [shape] = from;
  12. const { height } = shape.getBoundingClientRect();
  13. const { transform: prefix = '', fillOpacity = 1, strokeOpacity = 1, opacity = 1, } = shape.style;
  14. const [transformOrigin, transform] = isTranspose(coordinate)
  15. ? [[0, height], `scale(1, ${ZERO})`] // left-bottom corner
  16. : [[0, 0], `scale(${ZERO}, 1)`]; // left-top corner
  17. // Using a short fadeIn transition to hide element with scale(0.001)
  18. // which is still visible.
  19. const keyframes = [
  20. {
  21. transform: `${prefix} ${transform}`.trimStart(),
  22. fillOpacity: 0,
  23. strokeOpacity: 0,
  24. opacity: 0,
  25. },
  26. {
  27. transform: `${prefix} ${transform}`.trimStart(),
  28. fillOpacity,
  29. strokeOpacity,
  30. opacity,
  31. offset: 0.01,
  32. },
  33. {
  34. transform: `${prefix} scale(1, 1)`.trimStart(),
  35. fillOpacity,
  36. strokeOpacity,
  37. opacity,
  38. },
  39. ];
  40. // Change transform origin for correct transform.
  41. shape.setOrigin(transformOrigin);
  42. const animation = shape.animate(keyframes, effectTiming(defaults, value, options));
  43. // Reset transform origin to eliminate side effect for following animations.
  44. animation.finished.then(() => shape.setOrigin(0, 0));
  45. return animation;
  46. };
  47. };
  48. //# sourceMappingURL=scaleInX.js.map