transition组件可以给任何元素和组件添加进入/离开过渡，但只能给单个组件实行过渡效果(多个元素可以用transition-group组件，下一节再讲)，调用该内置组件时，可以传入如下特性:
name 用于自动生成CSS过渡类名 例如:name:'fade'将自动拓展为.fade-enter，.fade-enter-active等
appear 是否在初始渲染时使用过渡 默认为false
css 是否使用 CSS 过渡类。 默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。
mode 控制离开/进入的过渡时间序列 可设为"out-in"或"in-out"；默认同时生效
type 指定过渡事件类型 可设为transition或animation，用于侦听过渡何时结束;可以不设置，Vue内部会自动检测出持续时间长的为过渡事件类型
duration 定制进入和移出的持续时间 以后用到再看
type表示transition对应的css过渡类里的动画样式既可以用transition也可以用animation来设置动画(可以同时使用)，然后我们可以用指定，Vue内部会自动判断出来
除了以上特性，我们还可以设置如下特性，用于指定过渡的样式:
appear-class 初次渲染时的起始状态 ;如果不存在则等于enter-class属性 这三个属性得设置了appear为true才生效
appear-to-class 初次渲染时的结束状态 如果不存在则等于enter-to-class 属性
appear-active-class 初次渲染时的过渡 如果不存在则等于enter-active-class属性
enter-class 进入过渡时的起始状态
enter-to-class 进入过渡时的结束状态
enter-active-class 进入过渡时的过渡
leave-class 离开过渡时的起始状态
leave-to-class 离开过渡时的结束状态
leave-active-class 离开过渡时的过渡
对于后面六个class,内部会根据name拼凑出对应的class来,例如一个transition的name="fade"，拼凑出来的class名默认分别为:fade-enter、fade-enter-to、fade-enter-active、fade-leave、fade-leave-to、fade-leave-active
除此之外还可以在transition中绑定自定义事件，所有的自定义事件如下
before-appear 初次渲染，过渡前的事件 未指定则等于before-enter事件
appear 初次渲染开始时的事件 未指定则等于enter事件
after-appear 初次渲染，过渡结束后的事件 未指定则等于enter-cancelled事件
appear-cancelled 初次渲染未完成又触发隐藏条件而重新渲染时的事件,未指定则等于enter-cancelled事件
before-enter 进入过渡前的事件
enter 进入过渡时的事件
after-enter 进入过渡结束后的事件
enter-cancelled 进入过渡未完成又触发隐藏条件而重新渲染时的事件
before-leave 离开过渡前的事件
leave 离开时的事件
after-leave 离开后的事件
leave-cancelled 进入过渡未完成又触发隐藏条件而重新渲染时的事件
transition相关的所有属性应该都列出来了(应该比官网还多吧，我是从源码里找到的)，我们举一个例子，如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<style>
.fade-enter,.fade-leave-to{background: #f00;transform:translateY(20px);} /*.fade-enter和.fade-leave-to一般写在一起，当然也可以分开*/
.fade-enter-active,.fade-leave-to{transition:all 1s linear 500ms;}
</style>
<body>
<div id="app">
<button @click="show=!show">按钮</button>
<transition name="fade" :appear="true" @before-enter="beforeenter" @enter="enter" @after-enter="afterenter" @before-leave="beforeleave" @leave="leave" @after-leave="afterleave">
<p v-if="show">你好</p>
</transition>
</div>
<script>
Vue.config.productionTip=false;
Vue.config.devtools=false;
var app = new Vue({
el:"#app",
data:{
show:true
},
methods:{
beforeenter(){console.log('进入过渡前的事件')},
enter(){console.log('进入过渡开始的事件')},
afterenter(){console.log('进入过渡结束的事件')},
beforeleave(){console.log('离开过渡前的事件')},
leave(){console.log('离开过渡开始的事件')},
afterleave(){console.log('离开过渡结束的事件')}
}
})
</script>
</body>
</html>
我们调用transition组件时设置了appear特性为true,这样页面加载时动画就开始了，如下:
控制台输出如下:
文字从透明到渐显，同时位移也发生了变化，我们点击按钮时又会触发隐藏，继续点击，又会显示，这是因为我们在transition的子节点里使用了v-show指令。
对于transition组件来说,在下列情形中，可以给任何元素和组件添加进入/离开过渡:
条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点
用原生DOM模拟transition组件
Vue内部是通过修改transition子节点的class名来实现动画效果的，我们用原生DOM实现一下这个效果,如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.trans{transition:all 2s linear;}
.start{transform:translatex(100px);opacity: 0;}
</style>
<body>
<div id="con">
<button name="show">显式</button>
<button name="hide">隐藏</button>
</div>
<p id="p">Hello Vue!</p>
<script>
var p = document.getElementsByTagName('p')[0];
document.getElementById('con').addEventListener('click',function(event){
switch(event.target.name){
case "show":
p.style.display="block";
p.classList.add('trans');
p.classList.remove('start')
break;
case "hide":
p.classList.add('trans')
p.classList.add('start')
break;
}
})
</script>
</body>
</html>
渲染的页面如下:
我们点击隐藏按钮后，Hello Vue!就逐渐隐藏了，然后我们查看DOM，如下:
这个DOM元素还是存在的，只是opacity这个透明度的属性为0，Vue内部的transition隐藏后是一个注释节点，这是怎么实现的，我们能不能也实现出来,当然可以。
Vue内部通过window.getComputedStyle()这个API接口获取到了transition或animation的结束时间，然后通过绑定transitionend或animationend事件(对应不同的动画结束事件)执行一个回调函数，该回调函数会将DOM节点设置为一个注释节点(隐藏节点的情况下)
我们继续改一下代码，如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.trans{transition:all 2s linear;}
.start{transform:translatex(100px);opacity: 0;}
</style>
<body>
<div id="con">
<button name="show">显式</button>
<button name="hide">隐藏</button>
</div>
<p id="p">Hello Vue!</p>
<script>
var p = document.getElementsByTagName('p')[0],
tid = null,
pDom = null,
CommentDom = document.createComment("");
document.getElementById('con').addEventListener('click',function(event){
switch(event.target.name){
case "show":
CommentDom.parentNode.replaceChild(p,CommentDom)
setTimeout(function(){p.classList.remove('start')},10)
ModifyClass(1)
break;
case "hide":
p.classList.add('trans')
p.classList.add('start')
ModifyClass(0)
break;
}
}) function ModifyClass(n){ //s=1:显式过程 s=0:隐藏过程
var styles = window.getComputedStyle(p);
var transitionDelays = styles['transitionDelay'].split(', '); //transition的延迟时间 ;比如:["0.5s"]
var transitionDurations = styles['transitionDuration'].split(', '); //transition的动画持续时间 ;比如:"1s"
var transitionTimeout = getTimeout(transitionDelays, transitionDurations); //transition的获取动画结束的时间，单位ms，比如:1500
tid && clearTimeout(tid);
tid=setTimeout(function(){
if(n){ //如果是显式
p.classList.remove('trans')
p.removeAttribute('class');
}else{ //如果是隐藏
p.parentNode.replaceChild(CommentDom,p);
}
},transitionTimeout)
} function getTimeout(delays, durations) { //从Vue源码里拷贝出来的代码的，获取动画完成的总时间，返回ms格式
while (delays.length < durations.length) {
delays = delays.concat(delays);
}
return Math.max.apply(null, durations.map(function (d, i) {
return toMs(d) + toMs(delays[i])
}))
}
function toMs(s) {
return Number(s.slice(0, -1)) * 1000
}
</script> </body>
</html>
这样当动画结束后改DOM就真的隐藏了,变为了一个注释节点,如下:
当再次点击时，就会显式出来，如下:
完美,这里遇到个问题，就是当显式的时候直接设置class不会有动画，应该是和重绘有关的吧m所以用了一个setTImeout()来实现。
Vue也就是把这些原生DOM操作进行了封装，我们现在来看Vue的源码
源码分析
transition是Vue的内置组件，在执行initGlobalAPI()时extend保存到Vue.options.component(第5052行)，我们可以打印看看，如下:
Transition组件的格式为:
var Transition = { //第8012行 transition组件的定义
name: 'transition',
props: transitionProps,
abstract: true,
render: function render (h) {
/**/
}
}
也就是说transition组件定义了自己的render函数。
以上面的第一个例子为例，执行到transition组件时会执行到它的render函数，如下:
render: function render (h) { //第8217行 transition组件的render函数，并没有template模板，初始化或更新都会执行到这里
var this$1 = this;
var children = this.$slots.default;
if (!children) {
return
}
// filter out text nodes (possible whitespaces)
children = children.filter(function (c) { return c.tag || isAsyncPlaceholder(c); });
/* istanbul ignore if */
if (!children.length) { //获取子节点
return //如果没有子节点，则直接返回
}
// warn multiple elements
if ("development" !== 'production' && children.length > 1) { //如果过滤掉空白节点后，children还是不存在，则直接返回
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 ("development" !== 'production' &&
mode && mode !== 'in-out' && mode !== 'out-in' //检查mode是否规范只能是in-out或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.
if (hasParentTransition(this.$vnode)) { //如果当前的transition是根组件，且调用该组件的时候外层又套了一个transition
return rawChild //则直接返回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) + "-"; //拼凑key，比如:__transition-1 ;this._uid是transition组件实例的_uid，在_init初始化时定义的
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); //获取组件上的props和自定义事件,保存到child.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(function (d) { return d.name === 'show'; })) { //如果child带有一个v-show指令
child.data.show = true; //则给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 () {
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);
mergeVNodeHook(data, 'enterCancelled', performLeave);
mergeVNodeHook(oldData, 'delayLeave', function (leave) { delayedLeave = leave; });
}
}
return rawChild //返回DOM节点
}
extractTransitionData()可以获取transition组件上的特性等，如下:
function extractTransitionData (comp) { //第8176行 提取在transition组件上定义的data
var data = {};
var options = comp.$options; //获取comp组件的$options字段
// props
for (var key in options.propsData) { //获取propsData
data[key] = comp[key]; //并保存到data里面 ,例如:{appear: true,name: "fade"}
}
// events.
// extract listeners and pass them directly to the transition methods
var listeners = options._parentListeners; //获取在transition组件上定义的自定义事件
for (var key$1 in listeners) { //遍历自定义事件
data[camelize(key$1)] = listeners[key$1]; //也保存到data上面
}
return data
}
例子里的transition组件执行到返回的值如下:
也就是说transition返回的是子节点VNode,它只是在子节点VNode的data属性上增加了transition组件相关的信息
对于v-show指令来说，初次绑定时会执行bind函数(可以看https://www.cnblogs.com/greatdesert/p/11157771.html),如下:
var show = { //第8082行
bind: function bind (el, ref, vnode) { //初次绑定时执行
var value = ref.value;
vnode = locateNode(vnode);
var transition$$1 = vnode.data && vnode.data.transition; //尝试获取transition，如果v-show绑定的标签外层套了一个transition则会把信息保存到该对象里
var originalDisplay = el.__vOriginalDisplay =
el.style.display === 'none' ? '' : el.style.display; //保存最初的display属性
if (value && transition$$1) { //如果transition$$1存在的话
vnode.data.show = true;
enter(vnode, function () { //执行enter函数，参数2是个函数，是动画结束的回掉函数
el.style.display = originalDisplay;
});
} else {
el.style.display = value ? originalDisplay : 'none';
}
},
最后会执行enter函数，enter函数也就是动画的入口函数，比较长，如下:
function enter (vnode, toggleDisplay) { //第7599行 进入动画的回调函数
var el = vnode.elm;
// call leave callback now
if (isDef(el._leaveCb)) { //如果el._leaveCb存在，则执行它,离开过渡未执行完时如果重新触发了进入过渡，则执行到这里
el._leaveCb.cancelled = true;
el._leaveCb();
}
var data = resolveTransition(vnode.data.transition); //调用resolveTransition解析vnode.data.transition里的css属性
if (isUndef(data)) {
return
}
/* istanbul ignore if */
if (isDef(el._enterCb) || el.nodeType !== 1) {
return
}
var css = data.css; //是否使用 CSS 过渡类
var type = data.type; //过滤类型，可以是transition或animation 可以为空，Vue内部会自动检测
var enterClass = data.enterClass; //获取进入过渡是的起始、结束和过渡时的状态对应的class
var enterToClass = data.enterToClass;
var enterActiveClass = data.enterActiveClass;
var appearClass = data.appearClass; //获取初次渲染时的过渡，分别是起始、结束和过渡时的状态对应的class
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; //当前transition组件的Vue实例vm
var transitionNode = activeInstance.$vnode; //占位符VNode
while (transitionNode && transitionNode.parent) { //如果transitoin组件是作为根节点的
transitionNode = transitionNode.parent; //则修正transitionNode为它的parent
context = transitionNode.context; //修正context为对应的parent的context
}
var isAppear = !context._isMounted || !vnode.isRootInsert; //当前是否还未初始化 如果transition组件还没有挂载,则设置isAppear为true
if (isAppear && !appear && appear !== '') { //如果appear为false(当前是初始化)，且appear为false(即初始渲染时不使用过渡),或不存在
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 ("development" !== 'production' && explicitEnterDuration != null) {
checkDuration(explicitEnterDuration, 'enter', vnode);
}
var expectsCSS = css !== false && !isIE9; //是否使用 CSS 过渡类 IE9是不支持的
var 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 () {
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); //如果定义了beforeEnterHook钩子函数，则执行它,例子里的beforeenter会执行这里，输出:进入过渡前的事件
if (expectsCSS) { //如果expectsCSS为true
addTransitionClass(el, startClass); //给el元素新增一个class，名为startClass
addTransitionClass(el, activeClass); //给el元素新增一个class，名为activeClass
nextFrame(function () { //下次浏览器重绘时
removeTransitionClass(el, startClass); //移除startClass这个class ;因为有设置了activeClass，所以此时就会开始执行动画了
if (!cb.cancelled) { //如果cb.cancelled为空
addTransitionClass(el, toClass); //添加toClass这个class
if (!userWantsControl) {
if (isValidDuration(explicitEnterDuration)) { //如果用户自定义了动画时间
setTimeout(cb, explicitEnterDuration);
} else {
whenTransitionEnds(el, type, cb); //否则执行默认的whenTransitionEnds()函数(等到动画结束后就会执行cb这个回调函数了)
}
}
}
});
}
if (vnode.data.show) {
toggleDisplay && toggleDisplay();
enterHook && enterHook(el, cb);
}
if (!expectsCSS && !userWantsControl) {
cb();
}
}
resolveTransition会根据transitioin里的name属性自动拼凑css名，如下:
function resolveTransition (def) { //第7419行 解析transition
if (!def) {
return
}
/* istanbul ignore else */
if (typeof def === 'object') { //如果def是一个对象
var res = {};
if (def.css !== false) { //如果css不等于false
extend(res, autoCssTransition(def.name || 'v')); //获取class样式
}
extend(res, def);
return res
} else if (typeof def === 'string') {
return autoCssTransition(def)
}
}
var autoCssTransition = cached(function (name) {
return {
enterClass: (name + "-enter"),
enterToClass: (name + "-enter-to"),
enterActiveClass: (name + "-enter-active"),
leaveClass: (name + "-leave"),
leaveToClass: (name + "-leave-to"),
leaveActiveClass: (name + "-leave-active")
}
});
例子里执行到这里时返回的如下:
回到enter函数，最后会执行whenTransitionEnds函数，如下:
function whenTransitionEnds ( //第7500行 工具函数，当el元素的动画执行完毕后就去执行cb函数
el,
expectedType,
cb
) {
var ref = getTransitionInfo(el, expectedType); //获取动画信息
var type = ref.type; //动画的类型，例如:transition
var timeout = ref.timeout; //动画结束时间
var propCount = ref.propCount; //如果是transition类型的动画，是否有transform动画存在
if (!type) { return cb() }
var event = type === TRANSITION ? transitionEndEvent : animationEndEvent; //如果是transition动画则设置event为transitionend(transition结束事件)，否则设置为animationend(animate结束事件)
var ended = 0;
var end = function () {
el.removeEventListener(event, onEnd);
cb();
};
var onEnd = function (e) { //动画结束事件
if (e.target === el) {
if (++ended >= propCount) {
end(); //如果所有的动画都执行结束了，则执行end()函数
}
}
};
setTimeout(function () {
if (ended < propCount) {
end();
}
}, timeout + 1);
el.addEventListener(event, onEnd); //在el节点上绑定event事件，当动画结束后会执行onEnd函数
}
getTransitionInfo用于获取动画的信息，返回一个对象格式，如下:
function getTransitionInfo (el, expectedType) { //第7533行 获取el元素上上的transition信息
var styles = window.getComputedStyle(el); //获取el元素所有最终使用的CSS属性值
var transitionDelays = styles[transitionProp + 'Delay'].split(', '); //transition的延迟时间 ;比如:["0.5s"]
var transitionDurations = styles[transitionProp + 'Duration'].split(', '); //动画持续时间
var transitionTimeout = getTimeout(transitionDelays, transitionDurations); //获取动画结束的时间
var animationDelays = styles[animationProp + 'Delay'].split(', ');
var animationDurations = styles[animationProp + 'Duration'].split(', ');
var animationTimeout = getTimeout(animationDelays, animationDurations);
var type;
var timeout = 0;
var propCount = 0;
/* istanbul ignore if */
if (expectedType === TRANSITION) { //如果expectedType等于TRANSITION(全局变量，等于字符串:'transition')
if (transitionTimeout > 0) {
type = TRANSITION;
timeout = transitionTimeout;
propCount = transitionDurations.length;
}
} else if (expectedType === ANIMATION) { //如果是animation动画
if (animationTimeout > 0) {
type = ANIMATION;
timeout = animationTimeout;
propCount = animationDurations.length;
}
} else {
timeout = Math.max(transitionTimeout, animationTimeout); //获取两个变量的较大值，保存到timeout里
type = timeout > 0
? transitionTimeout > animationTimeout //修正类型
? TRANSITION
: ANIMATION
: null;
propCount = type
? type === TRANSITION //动画的个数 transition可以一次性指定多个动画的，用,分隔
? transitionDurations.length
: animationDurations.length
: 0;
}
var hasTransform =
type === TRANSITION &&
transformRE.test(styles[transitionProp + 'Property']);
return { //最后返回一个动画相关的对象
type: type,
timeout: timeout,
propCount: propCount,
hasTransform: hasTransform
}
}
writer by:大沙漠 QQ:22969969
例子里返回后的对象信息如下:
回到whenTransitionEnds函数，等到动画结束时就会执行参数3，也就是enter函数内定义的cb局部函数，该函数最终会移除toClass和activeClass，最后执行afterEnter回掉函数。