vue-列表过渡

列表交错过渡

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

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

    
{{item.properties.organizationName}}

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);
      }
}