Vue过渡动画

<template>
  <div id="app">

    <!-- <button v-on:click="show = !show">toggle</button> -->
    <button v-on:click="toggleCom ">toggle</button>    
    <!--动画过渡-->
    <transition name='my-trans' mode='out-in'>
      <!-- <p v-show="show">i am show</p> -->
      <div :is='currentView'></div>
      <div></div>
    </transition>
  </div>
</template>

<script>
//如果要使用vue全局.
import Vue from 'vue'
import Coma from './components/a'
import Comb from './components/b'
export default {
  components:{
    Coma,Comb
  },
  data() {
    return {
      currentView:'Coma',
      myValue:'',
       myVal:'',
      show:"",
    }
  },
  computed:{

  },

  methods:{
    toggleCom(){
      if(this.currentView==='Coma'){
          this.currentView='Comb'
      }
      else{
          this.currentView='Coma'

      }
    }
  }
};
</script>
<style>
/*fasde 标签属性,  */
/* 阶段类名, 渐隐渐现 
 enter-active   --  leave-action*/
.my-trans-enter-active, .my-trans-leave-active{
  transition: opacity .5s ease-out;
}

/*开始*/
.my-trans-enter{
  transform: translateY(-5100px);
  opacity: 0;
}
/*结束阶段*/
.my-trans-leave-active{
  transform: translateY(500px);
  opacity: 0;
}
</style>