scaleOutY.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. import { isTranspose } from '../utils/coordinate';
  2. import { effectTiming } from './utils';
  3. /**
  4. * Scale mark from desired shape to nothing in y direction.
  5. */
  6. export const ScaleOutY = (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, 0], `scale(${ZERO}, 1)`] // left-top corner
  16. : [[0, height], `scale(1, ${ZERO})`]; // left-bottom 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} scale(1, 1)`.trimStart(),
  22. },
  23. {
  24. transform: `${prefix} ${transform}`.trimStart(),
  25. fillOpacity,
  26. strokeOpacity,
  27. opacity,
  28. offset: 0.99,
  29. },
  30. {
  31. transform: `${prefix} ${transform}`.trimStart(),
  32. fillOpacity: 0,
  33. strokeOpacity: 0,
  34. opacity: 0,
  35. },
  36. ];
  37. // Change transform origin for correct transform.
  38. shape.setOrigin(transformOrigin);
  39. const animation = shape.animate(keyframes, effectTiming(defaults, value, options));
  40. // Reset transform origin to eliminate side effect for following animations.
  41. animation.finished.then(() => shape.setOrigin(0, 0));
  42. return animation;
  43. };
  44. };
  45. //# sourceMappingURL=scaleOutY.js.map