.fade-enter-active, .fade-leave-active {   //定義元素 進(jìn)入頁面時(shí)和離開頁面時(shí)的 效果
     transition: opacity .5s;    // 設(shè)置透明度默認(rèn)是1 1是不透明 0是全透明 全透明相當(dāng)于消失在頁面上 transition css3的過度效果
    }
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
     opacity: 0;    //設(shè)置元素進(jìn)入 前和離開后都是純透明狀態(tài) 
 }

// 設(shè)置一個(gè)按鈕 通過v-show 控制元素的顯示隱藏

<div id="demo">
     <button v-on:click="show = !show">
      Toggle
     </button>

    <transition name="fade">   // <transition name="fade"></transition> 這個(gè)是必須的  
        <p v-if="show">hello</p>  //這里的name 和css樣式中的那個(gè) fade也是一致的 讓p元素display block和node之間切換
     </transition>
 </div>

var app1=new Vue({
    el:'#app',//或者'#app'
    data:{
      show:false   //vue實(shí)例 定義一個(gè)變量
    }
  })

<link  rel="stylesheet" type="text/css">  //cdn

<div>
     <button @click="show = !show">
      點(diǎn)擊
     </button>
     <transition
      name="custom-classes-transition"                    //使用 animate.css 雖然只是寫個(gè)類名 但前面不要忘記寫
      enter-active-class="animated slideInDown"           //animated 再寫 你要運(yùn)用的動(dòng)畫名稱
      leave-active-class="animated slideInUp"
     >
      <p v-if="show">hello</p>
     </transition>
    </div>

.fade-enter-active, .fade-leave-active {   
     transition: opacity .5s;   
    }
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
     opacity: 0;    
 }

<li class="nLi" v-for="(v,i) of itemList" @mouseover="show=i" @mouseout="show=-1">

                  <h3><a href="">企業(yè)文化</a>|</h3>

                  <transition name="fade">

                    <div class="sub" v-show="show==i">

                        <ul>

                          <li><a href="">公司理念</a></li> 

                          <li><a href="">發(fā)展戰(zhàn)略</a></li>

                         <li><a href="">發(fā)展歷程</a></li>

                     </ul>

               </div>

        </transition>

  </li> 

var app1=new Vue({
    el:'#app',//或者'#app'
    data:{
      show:-1   //vue實(shí)例 定義一個(gè)變量
    }
  })