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

    Vue中多元素過渡特效的解決方案

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

    常見示例

    最常見的多標簽過渡是一個列表和描述這個列表為空消息的元素:

    <transition>
     <table v-if="items.length > 0">
      <!-- ... -->
     </table>
     <p v-else>Sorry, no items found.</p>
    </transition>

    下面是一個例子

    <style>
    .fade-enter,.fade-leave-to{opacity:0;}
    .fade-enter-active,.fade-leave-active{transition:opacity .5s;}
    </style>
    <div >
     <button @click="clear">清空數據</button> 
     <button @click="reset">重置</button>  
     <transition name="fade">
      <ul v-if="items.length > 0">
       <li v-for="item in items">{{item}}</li>
      </ul>
      <p v-else>Sorry, no items found.</p>
     </transition>
    </div>
    <script>
    new Vue({
     el: '#demo',
     data: {
      items: ['html','css','js']
     },
     methods:{
      clear(){
       this.items.splice(0);
      },
      reset(){
       history.go();
      }
     }
    })
    </script>

    同標簽名稱

    如果是相同標簽名的元素切換時,Vue 為了效率只會替換相同標簽內部的內容

    <style>
    .fade-enter,.fade-leave-to{opacity:0;}
    .fade-enter-active,.fade-leave-active{transition:opacity .5s;}
    </style>
    <div >
     <button @click="show = !show">toggle</button>  
     <transition name="fade">
      <p v-if="show">Jb51</p>
      <p v-else>JB51</p>
     </transition>
    </div>
    <script>
    new Vue({
     el: '#demo',
     data: {
      show:true
     },
    })
    </script>

    由下面的示例可知,兩個相同的p元素切換時,無過渡效果

    因此,對于具有相同標簽名的元素切換的情況,需要通過 key 特性設置唯一的值來標記以讓 Vue 區分它們 

    <div >
     <button @click="show = !show">toggle</button>  
     <transition name="fade">
      <p v-if="show" key="trueMatch">Jb51</p>
      <p v-else key="falseMatch">JB51</p>
     </transition>
    </div>

    替代if

    在一些場景中,可以給通過給同一個元素的 key 特性設置不同的狀態來代替 v-if 和 v-else

    <transition>
     <button v-if="isEditing" key="save">Save</button>
     <button v-else key="edit">Edit</button>
    </transition>

    上面的例子可以重寫為

    <transition>
     <button v-bind:key="isEditing">
      {{ isEditing ? 'Save' : 'Edit' }}
     </button>
    </transition>

    下面是一個例子

    <style>
    .fade-enter,.fade-leave-to{opacity:0;}
    .fade-enter-active,.fade-leave-active{transition:opacity .5s;}
    </style>
    <div >
     <button @click="isEditing = !isEditing">toggle</button>  
     <transition name="fade">
      <p v-bind:key="isEditing">
       {{ isEditing ? 'Save' : 'Edit' }}
      </p>
     </transition>
    </div>
    <script>
    new Vue({
     el: '#demo',
     data: {
      isEditing:true
     },
    })
    </script>

    使用多個 v-if 的多個元素的過渡可以重寫為綁定了動態屬性的單個元素過渡

教我怎样炒股