当前位置 主页 > 网站技术 > 代码类 > 最大化 缩小

    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 的多个元素的过渡可以重写为绑定了动态属性的单个元素过渡