vue 过渡（笔记）

vue过渡

1.css过渡

1）内置Class类名

类名的添加以及切换取决于transition特性的值，例如transition=‘boom’，会有3个内置类名：
①.boom-trasition————始终保留在元素上
②.boom-enter————定义进入过渡的开始状态
③.boom-leave————定义进入过渡的结束状态

2）自定义css类名

代码示例如下：

<div v-show="ok" class="animated" transition="bounce">Watch me bounce</div>
Vue.transition('bounce',{
  enterClass: 'bounceInLeft',
  leaveClass: 'bounceOutRight'
  })

3) 显式声明css过渡类型

基于所使用的css，该事件要么是transitionend，要么是animationend。
代码示例如下：

Vue.transition('bounce',{
//该过渡效果将只侦听'animationend'事件
type: 'animation'
})

4)过渡流程

以下面的结构为例来说明css内部是如何处理过渡的

<div v-show="show" transition="">Transition example</div>

①如果show变为false，Vue.js将：

➢调用beforeLeave钩子；
➢将v-leave类名添加到元素上以触发过渡；
➢调用leave钩子；
➢等待过渡结束(监听transitionend事件)；
➢从DOM中删除元素并删除v-leave类名；
➢调用afterLeave钩子。

②如果show变为true, Vue.js将：

➢调用beforeEnter钩子；
➢将v-enter类名添加到元素上；
➢把它插入DOM中；
➢调用enter钩子；
➢强制一次CSS布局，让v-enter确实生效。然后删除v-enter类名，以触发过渡，回到元素的原始状态；
➢等待过渡结束；
➢调用afterEnter钩子。

2.js过渡

当只使用js过渡时，enter 和 leave 需要调用done回调（否则将被同步调用，过渡将立即结束）

使用jQuery来注册一个自定义的js过渡，代码示例如下：

Vue.transition('fade', {
  css:  false,
  enter: function (el, done) {
     //元素已被插入DOM中
     //在动画结束后调用done
  $(el)
    .css('opacity', 0)
    .animate({ opacity: 1 }，1000， done)
  },
  enterCancelled: function (el) {
    $ (el) .stop()
  },
  leave: function (el, done) {
    //与enter相同
   $(el).animate( {opacity: 0 }, 1000， done)
  },
  leaverCancelled: function (el) {
   $ (el) .stop()
  }
})

然后在transition特性中声明，代码示例如下：

<p transition="fade"> </p>

完整的注册一个js过渡的代码示例如下：

Vue.transition(ID,{
  enter:function() {},
  leave:function() {}
  })

3.渐进过渡

transition与v-for一起使用可以创建渐进过渡，即让v-for中的每个过渡项目可以依次产生过渡效果，而不是一次性同步产生过渡效果。