11.vue2-过渡和动画

Author: vanessa
Date: 2018/06/20

1.css过渡，transition

<div id="example-1">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition name="slide-fade">
    <p v-if="show">hello</p>
  </transition>
</div>
new Vue({
  el: '#example-1',
  data: {
    show: true
  }
})
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

过渡的类名
1.v-enter:进入过渡的开始状态
2.v-enter-active：进入过渡的过程
3.v-enter-to：进入过渡的结束状态
4.v-leave：离开过渡的开始状态
5.v-leave-active：离开过渡的过程
6.v-leave-to：离开过渡的结束状态
ps：v取决于transition标签上name的值

2.css动画，animation

<div id="example-2">
  <button @click="show = !show">Toggle show</button>
  <transition name="bounce">
    <p v-if="show">Lorem ipsum d.</p>
  </transition>
</div>
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

动画中v-enter类名在节点插入DOM后不会立即删除，而是在animateionend事件触发时删除
写法区别在css样式

3.自定义过渡的类名

enter-class,enter-active-class,enter-to-class,
leave-class,leave-active-class,leave-to-class
在transition标签中定义具体的class名即可

<transition name="fade" enter-class="enter" enter-active-class="active">

4.同时使用过渡和动画

当使用过渡时，vue有transitionend事件监听器，
当使用动画时，vue有animationend事件监听器，
同时使用动画和过渡，需要使用type属性设定animation或transition来明确vue监听类型

5.显性的过渡时间

<transition :duration="1000">...</transition>//毫秒单位
<transition :duration="{ enter: 500, leave: 800 }">...</transition>

6.js钩子即方法

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>
methods: {
  beforeEnter: function (el) {
  },
   enter: function (el, done) {
    done()
  },
  afterEnter: function (el) {
  },
  enterCancelled: function (el) {
  },
  beforeLeave: function (el) {
  },
  leave: function (el, done) {
    done()
  },
  afterLeave: function (el) {
  },
  leaveCancelled: function (el) {
  }
}

ps:在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

7.多个元素的过渡，过渡的模式mode=“in-out/out-in”

<transition>
	<table v-if="item.length>0">
    </table>
    <p v-else>sorry,no item</p>
</transition>

<transition>
  <button v-bind:key="docState">
    {{ buttonMessage }}
  </button>
</transition>
computed: {
  buttonMessage: function () {
    switch (this.docState) {
      case 'saved': return 'Edit'
      case 'edited': return 'Save'
      case 'editing': return 'Cancel'
    }
  }
}

ps:当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们

<transition>
  <button v-if="isEditing" key="save">
    Save
  </button>
  <button v-else key="edit">
    Edit
  </button>
</transition>

8.多个组件的过渡

<div>
    <input type="radio" name="sel" value="A" @click="selectChange">A
    <input type="radio" name="sel" value="B" @click="selectChange">B
</div>
<transition name="component-fade">
    <component :is="view"></component>
</transition>
data:{
    view:'v-a'
},
components:{
    'v-a':{
        template:'<div>Component A</div>'
    },
    'v-b':{
        template:'<div>aha,Component B,</div>'
    }
},
methods:{
    selectChange:function(e){
        if(e.target.value=='A'){
            this.view='v-a'
        }else{
            this.view='v-b'
        }
    }
}

9.列表的过渡,transtion-group

,不同与transtion，
1.他会以span标签形式存在，可以通过tag改变，
2.过渡模式不可以，
3.内部元素需要提高唯一的key