Author: vanessa
Date: 2018/06/20

1.css transition, 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
  }
})
/* Different entry and exit animations can be set */
/* Set Duration and Animation Functions */
.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;
}

Transitional Class Name
1.v-enter: Beginning of transition
2.v-enter-active: transition process
3.v-enter-to: Enter the end of transition
4.v-leave: leaving the starting state of transition
5.v-leave-active: leaving the transition process
6.v-leave-to: leaving the end state of transition
ps:v depends on the value of name on the transition tag

2.css animation, 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);
  }
}

The v-enter class name in the animation is not deleted immediately after the node inserts the DOM, but when the animateionend event triggers
Writing differentiates in css Style

3. Class name for custom transition

enter-class,enter-active-class,enter-to-class,
leave-class,leave-active-class,leave-to-class
Just define a specific class name in the transition tag

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

4. Use transitions and animations simultaneously

When using transitions, vue has a transitionend event listener,
When using animations, vue has an animationend event listener,
Using both animation and transition, you need to use the type property to set animation or transition to clarify the vue listening type

5. Transition time of dominance

<transition :duration="1000">...</transition>//Millisecond unit
<transition :duration="{ enter: 500, leave: 800 }">...</transition>

6.js hook is method

<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: done must be used for callback in enter and leave.Otherwise, they will be called synchronously and the transition will be completed immediately.

7. Transition of multiple elements, transition 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'
    }
  }
}

8. Transition of multiple components

<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. List transition, transtion-group

, different from transtion,
1. It will exist as a space tag, which can be changed by tag.
2. Transition mode is not possible.
3. Internal elements need to raise the unique key