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> 到此这篇关于Vue.javascript源码分析(二十八)高级应用transition组件详解就介绍到这了。能走多远，能扛多重，在与你与谁同行。更多相关Vue.javascript源码分析(二十八)高级应用transition组件详解内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
