vue中的transition使用

vue为节点插入、更新、删除时提供了css过渡工具

1.自动添加class类名

2.整合第三方动画库

以下是官网的示例

HTML

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

JS

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

CSS

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0
}

效果如下

过程分析:

1.点击按钮，show的值变为false
2.v-if的值为false，引起p节点删除操作
3.★transition检测到删除操作发生，为变化元素添加类fade-leave-active
4.★将变化元素添加类fade-leave-to，激发transition
5.删除节点