當前位置 主頁 > 網站技術 > 代碼類 > 最大化 縮小

    Vue過渡效果之CSS過渡詳解(結合transition,animation,animate.cs

    欄目:代碼類 時間:2020-02-05 21:08

    以一個toggle按鈕控制p元素顯隱為例,如果不使用過渡效果,則如下所示

    <div >
     <button v-on:click="show = !show">Toggle</button>
     <p v-if="show">藍色理想</p>
    </div>
    <script>
    new Vue({
     el: '#demo',
     data: {
      show: true
     }
    })
    </script>

    如果要為此加入過渡效果,則需要使用過渡組件transition 

    過渡組件

    Vue提供了transition的封裝組件,下面代碼中,該過渡組件的名稱為'fade'

     <transition name="fade">
      <p v-if="show">藍色理想</p>
     </transition>

    當插入或刪除包含在transition組件中的元素時,Vue會自動嗅探目標元素是否應用了 CSS 過渡或動畫,如果是,在恰當的時機添加/刪除 CSS 類名 

    過渡類名

    總共有6個(CSS)類名在enter/leave的過渡中切換

    v-enter

    定義進入過渡的開始狀態。在元素被插入時生效,在下一個幀移除

    v-enter-active

    定義過渡的狀態。在元素整個過渡過程中作用,在元素被插入時生效,在 transition 或 animation 完成之后移除。 這個類可以被用來定義過渡的過程時間,延遲和曲線函數

    v-enter-to

    定義進入過渡的結束狀態。在元素被插入一幀后生效(與此同時 v-enter 被刪除),在  transition 或 animation 完成之后移除

    v-leave

    定義離開過渡的開始狀態。在離開過渡被觸發時生效,在下一個幀移除

    v-leave-active

    定義過渡的狀態。在元素整個過渡過程中作用,在離開過渡被觸發后立即生效,在 transition 或 animation 完成之后移除。 這個類可以被用來定義過渡的過程時間,延遲和曲線函數

    v-leave-to

    定義離開過渡的結束狀態。在離開過渡被觸發一幀后生效(與此同時 v-leave 被刪除),在 transition 或 animation 完成之后移除

    對于這些在 enter/leave 過渡中切換的類名,v- 是這些類名的前綴,表示過渡組件的名稱。比如,如果使用 <transition name="my-transition"> ,則 v-enter替換為 my-transition-enter

    transition

    常用的Vue過渡效果都是使用CSS過渡transition,下面增加一個enter時透明度變化,leave時位移變化的效果

    <style>
    .fade-enter{
     opacity:0;
    }
    .fade-enter-active{
     transition:opacity .5s;
    }
    .fade-leave-active{
     transition:transform .5s;
    }
    .fade-leave-to{
     transform:translateX(10px);
    }
    </style>
    <div >
     <button v-on:click="show = !show">Toggle</button>  
     <transition name="fade">
      <p v-if="show">藍色理想</p>
     </transition>
    </div>
    <script>
    new Vue({
     el: '#demo',
     data: {
      show: true
     }
    })
    </script>

    animation

    CSS動畫animation用法同CSS過渡transition,區別是在動畫中 v-enter 類名在節點插入 DOM 后不會立即刪除,而是在 animationend 事件觸發時刪除

    下面例子中,在元素enter和leave時都增加縮放scale效果

    <style>
    .bounce-enter-active{
     animation:bounce-in .5s;
    }
    .bounce-leave-active{
     animation:bounce-in .5s reverse;
    }
    @keyframes bounce-in{
     0%{transform:scale(0);}
     50%{transform:scale(1.5);}
     100%{transform:scale(1);}
    }
    </style>
    <div >
     <button v-on:click="show = !show">Toggle</button>  
     <transition name="bounce">
      <p v-if="show">藍色理想</p>
     </transition>
    </div>
    <script>
    new Vue({
     el: '#demo',
     data: {
      show: true
     }
    })
    </script>
    
    下一篇:沒有了
教我怎样炒股