scaleOutY.js 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.ScaleOutY = void 0;
  4. const coordinate_1 = require("../utils/coordinate");
  5. const utils_1 = require("./utils");
  6. /**
  7. * Scale mark from desired shape to nothing in y direction.
  8. */
  9. const ScaleOutY = (options) => {
  10. // Small enough to hide or show very small part of mark,
  11. // but bigger enough to not cause bug.
  12. const ZERO = 0.0001;
  13. return (from, to, value, coordinate, defaults) => {
  14. const [shape] = from;
  15. const { height } = shape.getBoundingClientRect();
  16. const { transform: prefix = '', fillOpacity = 1, strokeOpacity = 1, opacity = 1, } = shape.style;
  17. const [transformOrigin, transform] = (0, coordinate_1.isTranspose)(coordinate)
  18. ? [[0, 0], `scale(${ZERO}, 1)`] // left-top corner
  19. : [[0, height], `scale(1, ${ZERO})`]; // left-bottom corner
  20. // Using a short fadeIn transition to hide element with scale(0.001)
  21. // which is still visible.
  22. const keyframes = [
  23. {
  24. transform: `${prefix} scale(1, 1)`.trimStart(),
  25. },
  26. {
  27. transform: `${prefix} ${transform}`.trimStart(),
  28. fillOpacity,
  29. strokeOpacity,
  30. opacity,
  31. offset: 0.99,
  32. },
  33. {
  34. transform: `${prefix} ${transform}`.trimStart(),
  35. fillOpacity: 0,
  36. strokeOpacity: 0,
  37. opacity: 0,
  38. },
  39. ];
  40. // Change transform origin for correct transform.
  41. shape.setOrigin(transformOrigin);
  42. const animation = shape.animate(keyframes, (0, utils_1.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. exports.ScaleOutY = ScaleOutY;
  49. //# sourceMappingURL=scaleOutY.js.map