vue爲v-if添加過渡動畫效果

單v-if的過渡動畫

當需要爲html添加過渡動畫的時候，可以在將被過渡的部分寫在transition標籤中，併爲其添加name屬性。（如果不添加會默認爲v）。

<transition name="plus-icon">
      <div class="icon-plus"
           v-if="flag">
           <img />
      </div>
</transition>

vue 爲過渡動畫添加了兩對，共六種狀態，分別是v-enter、v-enter-active、v-enter-to、v-leave、v-leave-active和v-leave-to。這六個也是相應的樣式名。如果transition標籤有name屬性，則將v進行相應替換。

這裏以enter爲例，介紹v-enter、v-enter-active、v-enter-to這三種樣式，leave狀態類似。v-enter是過渡開始時的狀態樣式，v-enter-to是過渡結束後的樣式，v-enter-active描繪整個過渡過程，填寫過渡動作。

下面是具體的過渡樣式，

  .plus-icon-enter-active{
    transition: opacity .5s;
  }
  .plus-icon-enter{
     opacity: 0;
  }
  .plus-icon-leave-active{
    transition: opacity .5s;
  }
  .plus-icon-leave-to{
    opacity: 0;
  }

因爲我們的transition標籤的name屬性爲plus-icon。所以樣式名也進行了替換。plus-icon-enter表示過渡開始前的透明度爲0，plus-icon-enter-active表示0.5內完成透明度的變化，變化的默認事件曲線爲linear。這裏沒有寫過渡結束後的透明度變化，因爲v-if爲true時的透明度爲1。

   .plus-icon-enter-to{
     opacity: 1;
  }

也可以這麼寫，即過渡結束後，透明度爲1，效果也是一樣的