Vue2.0中的transition组件

组件的过度

---

Vue1.0中transition做为标签的行内属性被vue支持。但在Vue2.0中。Vue放弃了旧属性的支持并提供了transition组件，transition做为标签被使用。

使用transition完成任何元素进入/离开的过渡组件需要满足下列条件

• 条件渲染（v-if）
• 条件展示（v-show）
• 动态组件
• 组件根节点

Elample

<div id="demo">                                                                                                         
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}

• <transition>中只有name属性，不可添加其他标签属性
• <transition>中只能有一个子元素并且该子元素需要有v-show或者v-if来控制是否显示

 

过渡CSS类名

<transition>中的name属性用于 替换 vue钩子函数中的类名v-

• v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
• v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在transition/animation完成之后移除。

• v-leave:定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
• v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在transition/animation完成之后移除。