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>