function enter()

in views/vue.js [7913:8057]


  function enter(vnode, toggleDisplay) {
    const el = vnode.elm;

    // call leave callback now
    if (isDef(el._leaveCb)) {
      el._leaveCb.cancelled = true;
      el._leaveCb();
    }

    const data = resolveTransition(vnode.data.transition);
    if (isUndef(data)) {
      return;
    }

    /* istanbul ignore if */
    if (isDef(el._enterCb) || el.nodeType !== 1) {
      return;
    }

    const css = data.css;
    const type = data.type;
    const enterClass = data.enterClass;
    const enterToClass = data.enterToClass;
    const enterActiveClass = data.enterActiveClass;
    const appearClass = data.appearClass;
    const appearToClass = data.appearToClass;
    const appearActiveClass = data.appearActiveClass;
    const beforeEnter = data.beforeEnter;
    const enter = data.enter;
    const afterEnter = data.afterEnter;
    const enterCancelled = data.enterCancelled;
    const beforeAppear = data.beforeAppear;
    const appear = data.appear;
    const afterAppear = data.afterAppear;
    const appearCancelled = data.appearCancelled;
    const duration = data.duration;

    // activeInstance will always be the <transition> component managing this
    // transition. One edge case to check is when the <transition> is placed
    // as the root node of a child component. In that case we need to check
    // <transition>'s parent for appear check.
    let context = activeInstance;
    let transitionNode = activeInstance.$vnode;
    while (transitionNode && transitionNode.parent) {
      transitionNode = transitionNode.parent;
      context = transitionNode.context;
    }

    const isAppear = !context._isMounted || !vnode.isRootInsert;

    if (isAppear && !appear && appear !== "") {
      return;
    }

    const startClass = isAppear && appearClass ? appearClass : enterClass;
    const activeClass =
      isAppear && appearActiveClass ? appearActiveClass : enterActiveClass;
    const toClass = isAppear && appearToClass ? appearToClass : enterToClass;

    const beforeEnterHook = isAppear
      ? beforeAppear || beforeEnter
      : beforeEnter;
    const enterHook = isAppear
      ? typeof appear === "function"
        ? appear
        : enter
      : enter;
    const afterEnterHook = isAppear ? afterAppear || afterEnter : afterEnter;
    const enterCancelledHook = isAppear
      ? appearCancelled || enterCancelled
      : enterCancelled;

    const explicitEnterDuration = toNumber(
      isObject(duration) ? duration.enter : duration
    );

    if ("development" !== "production" && explicitEnterDuration != null) {
      checkDuration(explicitEnterDuration, "enter", vnode);
    }

    const expectsCSS = css !== false && !isIE9;
    const userWantsControl = getHookArgumentsLength(enterHook);

    var cb = (el._enterCb = once(function() {
      if (expectsCSS) {
        removeTransitionClass(el, toClass);
        removeTransitionClass(el, activeClass);
      }
      if (cb.cancelled) {
        if (expectsCSS) {
          removeTransitionClass(el, startClass);
        }
        enterCancelledHook && enterCancelledHook(el);
      } else {
        afterEnterHook && afterEnterHook(el);
      }
      el._enterCb = null;
    }));

    if (!vnode.data.show) {
      // remove pending leave element on enter by injecting an insert hook
      mergeVNodeHook(vnode, "insert", function() {
        const parent = el.parentNode;
        const pendingNode =
          parent && parent._pending && parent._pending[vnode.key];
        if (
          pendingNode &&
          pendingNode.tag === vnode.tag &&
          pendingNode.elm._leaveCb
        ) {
          pendingNode.elm._leaveCb();
        }
        enterHook && enterHook(el, cb);
      });
    }

    // start enter transition
    beforeEnterHook && beforeEnterHook(el);
    if (expectsCSS) {
      addTransitionClass(el, startClass);
      addTransitionClass(el, activeClass);
      nextFrame(function() {
        removeTransitionClass(el, startClass);
        if (!cb.cancelled) {
          addTransitionClass(el, toClass);
          if (!userWantsControl) {
            if (isValidDuration(explicitEnterDuration)) {
              setTimeout(cb, explicitEnterDuration);
            } else {
              whenTransitionEnds(el, type, cb);
            }
          }
        }
      });
    }

    if (vnode.data.show) {
      toggleDisplay && toggleDisplay();
      enterHook && enterHook(el, cb);
    }

    if (!expectsCSS && !userWantsControl) {
      cb();
    }
  }