vue2.0 动画

 //先来一个简单的入场
 <template>
     <div id="box">
         <input type="button" value="按钮" @click="toggle">
         <transition name="fade">
             <div id="div1" v-show="bSign"></div>
         </transition>
     </div>
 </template>
 <script>
 export default{
     data(){
         return{
             bSign:true
         }
     },
     methods:{
         toggle(){
             this.bSign=!this.bSign;
         }
     }
 }
 </script>
 <style>
 #div1{
     width:100px;
     height:100px;
     background: red;
 }
 .fade-enter-active,.fade-leave-active{
     transition: all .3s ease;
     opacity: 1;
     transform: translateX(0px);
 }
 .fade-enter,.fade-leave-to{
     transform: translateX(10px);
   opacity: 0;
 }
 </style>

再来一个引用animate.css

 <template>
     <div id="box">
         <input type="button" value="按钮" @click="toggle">
         <transition name="fade"  enter-active-class="animated  zoomInLeft" 
　　　　　　　　leave-active-class="animated zoomOutRight">
             <div id="div1"  v-show="bSign"></div>
         </transition>
     </div>
 </template>
 <script>

 export default{
     data(){
         return{
             bSign:true
         }
     },
     methods:{
         toggle(){
             this.bSign=!this.bSign;
         }
     }
 }
 </script>
 <style>
 #div1{
     width:100px;
     height:100px;
     background: red;
     margin:80px;
 }
 /* .fade-enter-active,.fade-leave-active{
     transition: all .3s ease;
     opacity: 1;
     transform: translateX(0px);
 }
 .fade-enter,.fade-leave-to{
     transform: translateX(10px);
   opacity: 0;
 } */
 </style>