进入\离开&列表过渡
单元素/组件的过渡
transition
// 没有name，css默认为v-enter...
<transition name='fade'>
<p v-if="show">hello</p>
</transition>
.fade-enter-active,.fade-leave-active{
transition: opacity .5s
}
.fade-enter,.fade-leave-to{
opacity:0
}
#过渡的类名
- v-enter 定义进入过渡的开始状态，元素插入之前生效
- v-enter-active 定义进入过渡生效时的状态，在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除，定义进入过渡的过程时间，延迟和曲线函数
- v-enter-to 2.1.8+ 定义进入过渡的结束状态
- v-leave 定义离开过渡的开始状态
- v-leave-active 定义离开过渡生效时的状态
- v-leave-to 2.1.8+ 定义离开过渡的结束状态
#css动画
动画中的v-enter类名在节点插入DOM后不会立即删除，而是在animationend事件触发时删除
.v-active{
animation: bounce-in .5s
}
.v-leave-actiove{
animation: bounce-in .5s reverse
}
@keyframes bounce-in{
0% {
transform:scale(0)
}
100%{
tranform:scale(1)
}
}
#自定义过渡的类名
- enter-class
- enter-active-class
- enter-to-class (2.1.8+)
- leave-class
- leave-active-class
- leave-to-class(2.1.8+)
优先级高于普通的类名，可以结合第三方css动画库（Animate.css）
#同时使用过渡和动画
#显性的过渡持续时间
2.2.0+新增
<transition :duration="{enter: 500, leave: 800}"></transition>
#javascript钩子
<transition
@before-enter='beforeEnter'
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled" ></transition>
// methods中定义这些方法
当只用JavaScript过渡的时候，在enter和leave中必须使用done进行回调，否则会被同步调用
推荐对于仅使用JavaScript过渡的元素添加"v-bind:css='false'",vue会跳过css的检测，避免过渡过程中CSS的影响
#初始渲染的过渡
可以通过appear特性设置节点在初始渲染的过渡
<transition appear appear-class="xx" appear-to-class="sss" appear-active-class='dfsdf'></transition>
#多个元素的过渡
对于原生标签可以使用v-if/v-else
// 设置key
<transition>
<button v-if="isEditing" key='save'>save</button>
<button v-else key='edit'>edit</button>
</transition>
// 简写
<transition>
<button :key="text">
{{text? 'save': 'edit'}}
</button>
</transition>
#过渡模式
- in-out 新元素先进行过渡，完成之后当前元素过渡离开
- out-in 当前元素先进行过渡，完成之后新元素过渡进入
<transition name='fade' mode='out-in' ></transition>
多个组件的过渡
<transition name=''component-fade" mode="out-in">
<component :is="view"></component>
</transition>
列表过渡
使用<transition-grounp>组件
- 会呈现出一个真实的标签<span>,可以通过tag修改
- 过渡模式 mode不可用
- 内部元素总是需要提供唯一的key属性值
<transition-group name='list' tag='p'>
<span v-for="item in items" :key='item'>{{ item }}</span>
</transition-group>
列表的排序过渡
<transition-group>还可以改变定位，使用v-move特性
通过name属性来自定义前缀，也可以通过move-class属性手动设置
<transition-group name='fade' tag='ul'>
<liv-for="item in items" :key='item'>{{ item }}</li>
</transition>
.fade-move{
transition: transform 1s;
}
可复用的过渡
要创建一个可复用过渡组件，你需要做的就是将 <transition> 或者 <transition-group> 作为根组件，然后将任何子组件放置在其中就可以了。
