温故而知新之VUE（四）

进入\离开&列表过渡

单元素/组件的过渡

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> 作为根组件，然后将任何子组件放置在其中就可以了。

动态过渡