Function add

src/index.ts:601–634

* Adds the element with a transition. * @param el - Animates the element being added.

(el: Element)

 * @param el - Animates the element being added.
 */
function add(el: Element) {
  if (NEW in el) delete (el as any)[NEW]
  const newCoords = getCoords(el)
  coords.set(el, newCoords)
  const pluginOrOptions = getOptions(el)
  if (!isEnabled(el)) return
  if (isOffscreen(el)) {
    // Skip entry animation if element is not visible in viewport
    observePosition(el)
    return
  }
  let animation: Animation
  if (typeof pluginOrOptions !== "function") {
    animation = (el as HTMLElement).animate(
      [
        { transform: "scale(.98)", opacity: 0 },
        { transform: "scale(0.98)", opacity: 0, offset: 0.5 },
        { transform: "scale(1)", opacity: 1 },
      ],
      {
        duration: (pluginOrOptions as AutoAnimateOptions).duration * 1.5,
        easing: "ease-in",
      },
    )
  } else {
    const [keyframes] = getPluginTuple(pluginOrOptions(el, "add", newCoords))
    animation = new Animation(keyframes)
    animation.play()
  }
  animations.set(el, animation)
  animation.addEventListener("finish", updatePos.bind(null, el, false), {
    once: true,
  })
}

/**
 * Clean up after removing an element from the dom.