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);
      }
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值