make-none-animatable.mjs 1.2 KB

123456789101112131415161718192021222324252627282930
  1. import { analyseComplexValue } from '../../../value/types/complex/index.mjs';
  2. import { getAnimatableNone } from '../../dom/value-types/animatable-none.mjs';
  3. /**
  4. * If we encounter keyframes like "none" or "0" and we also have keyframes like
  5. * "#fff" or "200px 200px" we want to find a keyframe to serve as a template for
  6. * the "none" keyframes. In this case "#fff" or "200px 200px" - then these get turned into
  7. * zero equivalents, i.e. "#fff0" or "0px 0px".
  8. */
  9. const invalidTemplates = new Set(["auto", "none", "0"]);
  10. function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name) {
  11. let i = 0;
  12. let animatableTemplate = undefined;
  13. while (i < unresolvedKeyframes.length && !animatableTemplate) {
  14. const keyframe = unresolvedKeyframes[i];
  15. if (typeof keyframe === "string" &&
  16. !invalidTemplates.has(keyframe) &&
  17. analyseComplexValue(keyframe).values.length) {
  18. animatableTemplate = unresolvedKeyframes[i];
  19. }
  20. i++;
  21. }
  22. if (animatableTemplate && name) {
  23. for (const noneIndex of noneKeyframeIndexes) {
  24. unresolvedKeyframes[noneIndex] = getAnimatableNone(name, animatableTemplate);
  25. }
  26. }
  27. }
  28. export { makeNoneKeyframesAnimatable };