共计 10057 个字符，预计需要花费 26 分钟才能阅读完成。
1. 模板中 transition 标签会依据内建的 transition 组件选项创立组件实例。组件渲染成页面时调用 render 函数，获取 transition 标签内的标签对应的节点（插槽），并将 transition 组件标签上的数据合并到该节点 VNode 上。
如果先人（包含以后 transition 标签）都是根标签，且并存在它是 transition 标签内的标签（插槽）时，间接跳过以后的 transition。
mode 值为 out-in（以后元素先进行过渡，实现之后新元素过渡进入），当 transition 标签内组件切换时，间接返回空文本节点，来替换旧组件节点，旧节点移除时实现 leave 动画后，强制更新 transition 组件，新组件开始插入，并开始 enter 动画。
mode 值为 in-out（新元素先进行过渡，实现之后以后元素过渡来到），当 transition 标签内组件切换时，为旧组件节点增加 delayLeave 钩子（钩子用来开始节点的 leave 动画），当新节点实现 enter 动画后，再执行旧节点的 performLeave，开始旧节点的 leave 动画，最初从 document 中移除旧节点。
// 内建的 transition 组件选项
var transitionProps = {
name: String,
appear: Boolean,
css: Boolean,
mode: String,
type: String,
enterClass: String,
leaveClass: String,
enterToClass: String,
leaveToClass: String,
enterActiveClass: String,
leaveActiveClass: String,
appearClass: String,
appearActiveClass: String,
appearToClass: String,
duration: [Number, String, Object]
};
/* transition 组件选项 */
var Transition = {
name: 'transition',
props: transitionProps,
abstract: true,
render: function render (h) {// 获取 Vnode 节点，h：createElement
var this$1 = this;
var children = this.$slots.default;
if (!children) {return}
// filter out text nodes (possible whitespaces)
children = children.filter(isNotTextNode);// 过滤文本节点
/* istanbul ignore if */
if (!children.length) {return}
// warn multiple elements
if (process.env.NODE_ENV !== 'production' && children.length > 1) {
warn(
'<transition> can only be used on a single element. Use' +
'<transition-group> for lists.',
this.$parent
);
}
var mode = this.mode;
// warn invalid mode
if (process.env.NODE_ENV !== 'production' &&
mode && mode !== 'in-out' && mode !== 'out-in'
) {
warn(
'invalid <transition> mode:' + mode,
this.$parent
);
}
var rawChild = children[0];
// if this is a component root node and the component's
// parent container node also has transition, skip.
// 如果先人都是根标签, 且正好是 transition 组件标签内的标签（插槽）时，间接跳过以后的 transition
if (hasParentTransition(this.$vnode)) {return rawChild}
// apply transition data to child
// use getRealChild() to ignore abstract components e.g. keep-alive
var child = getRealChild(rawChild);
/* istanbul ignore if */
if (!child) {// 如果没有原生标签节点
return rawChild
}
if (this._leaving) {return placeholder(h, rawChild)
}
// ensure a key that is unique to the vnode type and to this transition
// component instance. This key will be used to remove pending leaving nodes
// during entering.
var id = "__transition-" + (this._uid) + "-";
child.key = child.key == null
? child.isComment
? id + 'comment'
: id + child.tag
: isPrimitive(child.key)
? (String(child.key).indexOf(id) === 0 ? child.key : id + child.key)
: child.key;
var data = (child.data || (child.data = {})).transition = extractTransitionData(this);// 将 transition 标签上的数据增加到子标签节点 data.transition 上
var oldRawChild = this._vnode;
var oldChild = getRealChild(oldRawChild);
// mark v-show
// so that the transition module can hand over the control to the directive
if (child.data.directives && child.data.directives.some(isVShowDirective)) {child.data.show = true;}
if (
oldChild &&
oldChild.data &&
!isSameChild(child, oldChild) &&
!isAsyncPlaceholder(oldChild) &&
// #6687 component root is a comment node
!(oldChild.componentInstance && oldChild.componentInstance._vnode.isComment)// 不是组件，或者不是只含正文标签的组件
) {
// replace old child transition data with fresh one
// important for dynamic transitions!
var oldData = oldChild.data.transition = extend({}, data);
// handle transition mode
if (mode === 'out-in') {// 以后元素先进行过渡，实现之后新元素过渡进入
// return placeholder node and queue update when leave finishes
this._leaving = true;
mergeVNodeHook(oldData, 'afterLeave', function () {// 增加 afterLeave 回调函数，旧节点动画实现后，再更新组件，从新渲染
this$1._leaving = false;
this$1.$forceUpdate();});
return placeholder(h, rawChild)// 移除旧节点，替换为空的文本节点
} else if (mode === 'in-out') {// 新元素先进行过渡，实现之后以后元素过渡来到
if (isAsyncPlaceholder(child)) {return oldRawChild}
var delayedLeave;
var performLeave = function () { delayedLeave(); };
mergeVNodeHook(data, 'afterEnter', performLeave);// 在 enter 动画实现之后开始调用 performLeave，开始 leave 动画
mergeVNodeHook(data, 'enterCancelled', performLeave);// 在 enter 动画过程中勾销后开始调用 performLeave，开始 leave 动画
mergeVNodeHook(oldData, 'delayLeave', function (leave) {delayedLeave = leave;});// 更改旧节点的 leave 动画的执行机会，提早从 document 移除的工夫
}
}
return rawChild
}
};2.transition 的 create、activete、reomve 办法将会增加到节点钩子函数汇合中，将在节点 patch 过程中的不同周期调用，在创立 dom 后、插入到 document 之前调用_enter 办法，在 dom 从 document 移除之前调用 leave 办法。
var transition = inBrowser ? {
create: _enter,// 创立 dom 后调用
activate: _enter,// 创立组件后，且是 transition 组件根标签节点时
remove: function remove$$1 (vnode, rm) {// 从文档中移除前调用
/* istanbul ignore else */
if (vnode.data.show !== true) {leave(vnode, rm);
} else {rm();// 从文档中移除
}
}
} : {};3. 在 enter 办法中，创立 dom、插入到 document 之前，增加 enter 和 enterActive 类名、调用对应的钩子。插入到文档后移除 enter 类名，增加 enterTo 类名。动画实现后，移除 enterTo 和 enterActive 类名。
function enter (vnode, toggleDisplay) {
var el = vnode.elm;
...
var css = data.css;// 是否通过 css 实现过渡
var type = data.type;// 判断是 transition 还是 animation
var enterClass = data.enterClass;
var enterToClass = data.enterToClass;
var enterActiveClass = data.enterActiveClass;
var appearClass = data.appearClass;
var appearToClass = data.appearToClass;
var appearActiveClass = data.appearActiveClass;
var beforeEnter = data.beforeEnter;// 钩子函数
var enter = data.enter;// 钩子函数
var afterEnter = data.afterEnter;// 钩子函数
var enterCancelled = data.enterCancelled;// 钩子函数
var beforeAppear = data.beforeAppear;// 钩子函数
var appear = data.appear;// 钩子函数(节点在初始渲染的过渡)
var afterAppear = data.afterAppear;// 钩子函数
var appearCancelled = data.appearCancelled;// 钩子函数
var 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.
var context = activeInstance;
var transitionNode = activeInstance.$vnode;
while (transitionNode && transitionNode.parent) {// 向上查找不是组件根标签的先人节点
context = transitionNode.context;
transitionNode = transitionNode.parent;
}
var isAppear = !context._isMounted || !vnode.isRootInsert;
if (isAppear && !appear && appear !== '') {return}
// 类名
var startClass = isAppear && appearClass
? appearClass
: enterClass;
var activeClass = isAppear && appearActiveClass
? appearActiveClass
: enterActiveClass;
var toClass = isAppear && appearToClass
? appearToClass
: enterToClass;
// 钩子函数
var beforeEnterHook = isAppear
? (beforeAppear || beforeEnter)
: beforeEnter;
var enterHook = isAppear
? (typeof appear === 'function' ? appear : enter)
: enter;
var afterEnterHook = isAppear
? (afterAppear || afterEnter)
: afterEnter;
var enterCancelledHook = isAppear
? (appearCancelled || enterCancelled)
: enterCancelled;
var explicitEnterDuration = toNumber(isObject(duration)
? duration.enter
: duration
);
if (process.env.NODE_ENV !== 'production' && explicitEnterDuration != null) {checkDuration(explicitEnterDuration, 'enter', vnode);
}
var expectsCSS = css !== false && !isIE9;
var userWantsControl = getHookArgumentsLength(enterHook);
var cb = el._enterCb = once(function () {// 动画完结后的回调，第一次调用后生效
if (expectsCSS) {removeTransitionClass(el, toClass);// 移除 toClass 类名
removeTransitionClass(el, activeClass);// 移除 active 类名
}
if (cb.cancelled) {if (expectsCSS) {removeTransitionClass(el, startClass);
}
enterCancelledHook && enterCancelledHook(el);// 调用 enter 过程勾销的钩子
} else {afterEnterHook && afterEnterHook(el);// 调用 afterEnter 钩子
}
el._enterCb = null;
});
if (!vnode.data.show) {
// remove pending leave element on enter by injecting an insert hook
mergeVNodeHook(vnode, 'insert', function () {
var parent = el.parentNode;
var 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);// 在插入文档之前调用 beforeEnter 钩子
if (expectsCSS) {addTransitionClass(el, startClass);// 增加 enter 类名，在插入到文档后移除
addTransitionClass(el, activeClass);// 增加 active 类名在
nextFrame(function () {// 下一帧
removeTransitionClass(el, startClass);// 移除 enter 类名
if (!cb.cancelled) {// 当进入 leave 状态，cb 将会被勾销
addTransitionClass(el, toClass);// 插入到文档后增加 enterTo 类名
if (!userWantsControl) {if (isValidDuration(explicitEnterDuration)) {setTimeout(cb, explicitEnterDuration);
} else {whenTransitionEnds(el, type, cb);// 动画完结后调用 cb
}
}
}
});
}
...
}4.leave 办法中，dom 从 document 移除之前，增加 leave 和 leaveActive 类名，以及对应的钩子。在下一帧移除 leave 类名，增加 leaveTo 类名。动画实现后移除 leaveTo 和 leaveActive 类名，而后 dom 从 document 中移除。
function leave (vnode, rm) {
var el = vnode.elm;
// call enter callback now
if (isDef(el._enterCb)) {// 终止 enter 状态，针对 afterEnterHook 钩子还没调用的状况，将会触发 enterCancelledHook 钩子函数
el._enterCb.cancelled = true;
el._enterCb();}
var data = resolveTransition(vnode.data.transition);
if (isUndef(data) || el.nodeType !== 1) {return rm()
}
/* istanbul ignore if */
if (isDef(el._leaveCb)) {return}
var css = data.css;
var type = data.type;
var leaveClass = data.leaveClass;
var leaveToClass = data.leaveToClass;
var leaveActiveClass = data.leaveActiveClass;
var beforeLeave = data.beforeLeave;
var leave = data.leave;
var afterLeave = data.afterLeave;
var leaveCancelled = data.leaveCancelled;
var delayLeave = data.delayLeave;// mode 为 in-out 时存在
var duration = data.duration;
var expectsCSS = css !== false && !isIE9;
var userWantsControl = getHookArgumentsLength(leave);
var explicitLeaveDuration = toNumber(isObject(duration)
? duration.leave
: duration
);
if (process.env.NODE_ENV !== 'production' && isDef(explicitLeaveDuration)) {checkDuration(explicitLeaveDuration, 'leave', vnode);
}
var cb = el._leaveCb = once(function () {if (el.parentNode && el.parentNode._pending) {el.parentNode._pending[vnode.key] = null;
}
if (expectsCSS) {removeTransitionClass(el, leaveToClass);
removeTransitionClass(el, leaveActiveClass);
}
if (cb.cancelled) {if (expectsCSS) {removeTransitionClass(el, leaveClass);
}
leaveCancelled && leaveCancelled(el);
} else {rm();// 移除 DOM 元素，会在本次宏工作执行完开始从新渲染
afterLeave && afterLeave(el);
}
el._leaveCb = null;
});
if (delayLeave) {delayLeave(performLeave);// 提早执行 performLeave（mode 为 in-out 时，在新节点 enter 动画实现时执行 performLeave，开始 leave 动画）} else {performLeave();
}
function performLeave () {
// the delayed leave may have already been cancelled
if (cb.cancelled) {// 被勾销了
return
}
// record leaving element
if (!vnode.data.show && el.parentNode) {(el.parentNode._pending || (el.parentNode._pending = {}))[(vnode.key)] = vnode;
}
beforeLeave && beforeLeave(el);// 调用 beforeLeave 钩子函数
if (expectsCSS) {addTransitionClass(el, leaveClass);// 增加 leave 类名
addTransitionClass(el, leaveActiveClass)// 增加 leaveActive 类名
nextFrame(function () {//
removeTransitionClass(el, leaveClass);// 在下一帧移除 leave 类名
if (!cb.cancelled) {addTransitionClass(el, leaveToClass);// 在下一帧增加 leaveToClass 类名
if (!userWantsControl) {if (isValidDuration(explicitLeaveDuration)) {// 动画实现后或者设定的持续时间实现后移除 leaveTo 和 leaveActive 类名，最初 dom 从 document 移除
setTimeout(cb, explicitLeaveDuration);// 在用户设定的持续时间后调用回调函数
} else {whenTransitionEnds(el, type, cb);// 动画完结调用回调函数
}
}
}
});
}
leave && leave(el, cb);
if (!expectsCSS && !userWantsControl) {cb();
}
}
}5.vue 通过 window.getComputedStyle 获取 css 设置的动画工夫，element.style 读取的只是元素的内联款式，即写在元素的 style 属性上的款式；而 getComputedStyle 读取的款式是最终款式，包含了内联款式、嵌入款式和内部款式。
正文完
