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组件详解内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!