vue动态滑入动画

从左侧滑入最新信息的动画

动画效果

代码实现

父组件，定时器模拟推入消息

<children :infoList='debtBerthWarnList'></children >
setInterval(()=>{
	// 这里去掉最后的补充数据
        that.debtBerthWarnList.pop();
        // 模拟接口数据
        let list = [{
          warnType: 1,
          areaName: '海淀',
          parkName: '中街',
          berthCode: 'WIERWKJEDFK22333',
          plateNumber: '粤SS2222',
          plateColor: 0,
          violationType: 2,
          money: parseInt(Math.random() * 1000)
        }];
        // 最后加入补充数据，补充数据可以写死定义在data中
        list.push({
          warnType: 1,
          areaName: '海淀',
          parkName: '中街',
          berthCode: 'WIERWKJEDFK22333',
          plateNumber: '粤SS2222',
          plateColor: 0,
          violationType: 2,
          money: 1000
        })
        // 重新赋值
        that.debtBerthWarnList = that.debtBerthWarnList.concat(list)
      }, 2000)

ps: 解释一下什么是补充数据，为什么需要它
补充数据页面不展示，是为了让最后一条消息实现滑入到第一张位置的动画效果

子组件

<template>
  <div class="infoList">
    <div class="infoSwiper">
      <div class='info'
          v-for="(item, index) in infoList"
          :key='item.id'
          最新消息从左侧滑入，最后一条是补充数据，所以需要减2
          **:style="{transform: `translateX(${ 290 * (infoList.length - index - 2) }px)`}"**>
        <div class="contentInfo">
          <p>欠费预警</p>
          <div>
            内容
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
// 每一个子盒子需要相对于复合组定位
<style scoped lang="stylus">
  .infoList {
    height: 380px;
    overflow hidden;
    width 100%;
    position relative
    .infoSwiper {
      width: 100%;
      height: 380px;
      position: relative;
      overflow: hidden;
    }
    .info {
      width: 290px;
      height: 380px;
      background: #FFFFFF;
      border-radius: 4px;
      position: absolute;
      left: 0px;
      top: 0;
      z-index: 10
      transition: all .8s ease;
      .contentInfo {
        width: 270px;
        padding: 20px;
        box-sizing: border-box;
        border: 1px solid #E8E8E8;
      }
  }

</style>