vue-列表过渡

列表交错过渡

使用场景：通过Input 搜索关键字后，下方结果集带有自上而下展开与自下而上收缩的动画效果。

• 列表过渡，使用<transition-group> 组件 ，可以通过tag 特性更换为指定的真实元素。
• 内部元素总是需要 提供唯一的 key 属性值
• 安装 velocity-animate 安装包

<transition-group 
      class= "m-company-lists"
      name="staggered-fade"
      tag="ul"
      appear
      v-bind:css="false"
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:leave="leave"
      v-if="companyNameLists.length > 0">
    <li
        class="m-company-lists-item"
        v-for="(item, index) in companyNameLists"
        :key="index"
        @click="selectCompany(item)"
        >{{item.properties.organizationName}}</li>
</transition-group>

import Velocity from 'velocity-animate';
methods:{
    beforeEnter: function(el) {
        el.style.opacity = 0;
        el.style.height = 0;
    },
    enter: function(el, done) {
        console.log(el);
        const delay = el.dataset.index * 150;
        setTimeout(function() {
            Velocity(el, { opacity: 1, height: "1.6em" }, { complete: done });
        }, delay);
     },
     leave: function(el, done) {
         const delay = el.dataset.index * 150;
         setTimeout(function() {
             Velocity(el, { opacity: 0, height: 0 }, { complete: done });
         }, delay);
      }
}