Vue顯示和隱藏如何用動畫形式顯示

Vue提供了transition的組件，在正常情況中，可以給任何元素和組件添加”進入”和”離開”過渡動畫。
在使用v-if或者v-show的時候，想讓效果好看一些，畢竟前端嗎，要審美哈哈~
其實好多種實現方法，這裏列出這一兩種

1.使用transition +css實現

<div id="app">
        <input type="button" value="按鈕" @click="toggle">
        <transition name="fade">
            <div id="div1" v-show="isShow" transiton="fade"></div>
        </transition>
</div>

點擊按鈕顯示隱藏或者滾動顯示隱藏

.fade-enter-active, .fade-leave-active {
      transition: opacity .5s
}
.fade-enter, .fade-leave-active {
      opacity: 0
}

這裏還是挺簡單的，效果可自行設置

2.利用 vue中的鉤子函數實現動畫

<div id="app">
    <button @click="toggle">顯示/隱藏</button><br>        
     <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
         <div class="show"  v-show="isshow">itcast 傳智</div>
     </transition>
 </div>

<script>
         data(){             
             return{
             	isshow: false
             }
         },
         methods: {
             toggle: function () {
                 this.isshow = !this.isshow;
             },
     // 以下三個與enter相關的方法只會在元素由隱藏變爲顯示的時候纔會執行
     // el:指的是當前調用這個方法的元素對象
     // done:用來決定是否要執行後續的代碼如果不執行這個方法，那麼將來執行完before執行完enter以後動畫就會停止  
             beforeEnter: function (el) {
                 console.log("beforeEnter");
                 // 當入場之前會執行 v-enter
                 el.style = "padding-left:100px";
             },
             enter: function (el, done) {
                 // 當進行的過程中每執行 v-enter-active
                 console.log("enter");
                 // 爲了能讓代碼正常進行，在設置了結束狀態後必須調用一下這個元素的
                 // offsetHeight / offsetWeight  只是爲了讓動畫執行
                 el.offsetHeight;
 
                 // 結束的狀態最後啊寫在enter中
                 el.style = "padding-left:0px";
 
 
                 // 執行done繼續向下執行
                 done();
             },
             afterEnter: function (el) {
                 // 當執行完畢以後會執行
                 console.log("afterEnter");
                 this.isshow = false;
             }
         }
     })
  </script>

	   <style>
         .show {
             transition: all 0.5s;
         }
     </style>