zoomOut.js 1.4 KB

12345678910111213141516171819202122232425262728293031323334
  1. import { effectTiming } from './utils';
  2. export const ZoomOut = (options) => {
  3. // Small enough to hide or show very small part of mark,
  4. // but bigger enough to not cause bug.
  5. const ZERO = 0.0001;
  6. return (from, to, value, coordinate, defaults) => {
  7. const [shape] = from;
  8. const { transform: prefix = '', fillOpacity = 1, strokeOpacity = 1, opacity = 1, } = shape.style;
  9. const keyframes = [
  10. { transform: `${prefix} scale(1)`.trimStart() },
  11. {
  12. transform: `${prefix} scale(${ZERO})`.trimStart(),
  13. fillOpacity,
  14. strokeOpacity,
  15. opacity,
  16. offset: 0.99,
  17. },
  18. {
  19. transform: `${prefix} scale(${ZERO})`.trimStart(),
  20. fillOpacity: 0,
  21. strokeOpacity: 0,
  22. opacity: 0,
  23. },
  24. ];
  25. const { width, height } = shape.getBoundingClientRect();
  26. // Change transform origin for correct transform.
  27. shape.setOrigin([width / 2, height / 2]);
  28. const animation = shape.animate(keyframes, effectTiming(defaults, value, options));
  29. // Reset transform origin to eliminate side effect for following animations.
  30. animation.finished.then(() => shape.setOrigin(0, 0));
  31. return animation;
  32. };
  33. };
  34. //# sourceMappingURL=zoomOut.js.map