一、动画过渡
关于动画部分,一般是css3的transtion、transform和animation,这部分可以参考w3school上的内容。
二、vue的内置组件
vue的内置组件一共有五个(截至到目前vue2.x),这里主要介绍的是过渡组件<transition>和<transition-group>(官方文档)。
1、常用情形
- 条件渲染 v-if
- 条件显示 v-show
- 动态组件 <component :is="xxx">
- 组件根节点
2、<transition>的渲染
<transition name="fade"> <p v-if="show">test</p> </transtion>
new Vue({ el:"#demo", data(){ return{ show: true; } } })
.fade-enter-active, .fade-leave-active{ transition: all 1s ease-in-out; } .fade-enter, .fade-leave-to{ opacity: 0; }
3、<transition>的标签属性、事件
4、<transition-group>
<transition>可用于渲染v-if,v-show,v-if/v-else的元素,但是渲染v-if/v-else时如果是同名标签(如都是<div>)也需要指明key值
<transition-group>用于渲染v-for的元素,如整个列表的渲染,但是渲染时每个子节点都应该有自己的key值
三、钩子函数
<transition>和<transition-group>都有自己的事件属性,可以使用v-on指令指定对应的js函数
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" > <!-- ... --> </transition>
// ... methods: { // -------- // 进入中 // -------- beforeEnter: function (el) { // ... }, // 当与 CSS 结合使用时 // 回调函数 done 是可选的 enter: function (el, done) { // ... done() }, afterEnter: function (el) { // ... }, enterCancelled: function (el) { // ... }, // -------- // 离开时 // -------- beforeLeave: function (el) { // ... }, // 当与 CSS 结合使用时 // 回调函数 done 是可选的 leave: function (el, done) { // ... done() }, afterLeave: function (el) { // ... }, // leaveCancelled 只用于 v-show 中 leaveCancelled: function (el) { // ... } }
当只用 JavaScript 过渡的时候,在 enter
和 leave
中必须使用 done
进行回调。否则,它们将被同步调用,过渡会立即完成。
对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"
,Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
四、过渡模式
在vue的transition组件中,离开和进入是同时发生的,这意味着两个元素会同时存在一段时间,如果想避免这种情况,可以使用过渡模式<transition mode='in-out'>来渲染,过渡模式有以下两种:
-
in-out
:新元素先进行过渡,完成之后当前元素过渡离开。 -
out-in
:当前元素先进行过渡,完成之后新元素过渡进入。