過渡動畫

內建過渡動畫

transition標籤
​
六種狀態
離開 
leave 離開之前
leave-active 離開的過程
leave-to 離開
進入
enter 進入之前
enter-active 進入的過程中
enter-to  進入之後

案例展示

樣式
  <style>
    .box{
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      top:50px;
      left:100px
     }
    .aa-leave{
      left:100px;
      transform: rotate(0deg);
     }
    .aa-leave-active{
      transition: all 1s;
     }
    .aa-leave-to{
      left:1000px;
      transform: rotate(720deg);
     }
    .aa-enter{
      left: 800px;
      transform: scale(0.2,0.2);
     }
    .aa-enter-active{
      transition: all 1.5s;
     }
    .aa-enter-to{
      left: 20px;
      top: 200px;
      transform: scale(2,2);
     }
  </style>
  
檢視
    <button @click='isShow=!isShow'>點選我有驚喜</button>
    <!-- vue中提供一個屬性，叫過渡動畫，你要給誰加過渡動畫，就在誰的外層加 transtion 標籤。在transition中有一個name屬性，name屬性當做class去使用-->
    <transition name='aa'>
        <div v-show='isShow' class="box"></div>
    </transition>