文本上下无缝滚动 vue

jQuery方式

function AutoScroll(obj) {
  $(obj).find("ul:first").animate({
        marginTop: "-.48rem"
    },
    1000,
    function() {
        $(this).css({
            marginTop: "0"
        }).find("li:first").appendTo(this);
    }
    );
}
$(document).ready(function() {
    setInterval('AutoScroll(".list_lh")', 1000)
});

html

<div class="center-right-clockIn">
  <label class="clockIn-title">人员打卡记录</label>
  <div class="clockIn-header">
    <ul>
      <li>姓名</li>
      <li>单位</li>
      <li>时间</li>
      <li>状态</li>
    </ul>
  </div>
  <div class="clockIn-item">
    <ul ref="clockIn" :class="{'animate-up':animateUp}" >
      <li v-for="item in tableData" :key="item.name">
        <span>{{ item.name }}</span>
        <span>{{ item.company }}</span>
        <span>{{ item.date }}</span>
        <span>{{ item.status }}</span>
      </li>
    </ul>
  </div>
</div>

js

data() {
    return {
      mapImg: require("assets/img/main.png"),
      tableData: [
        {
          date: "2016-05-02",
          name: "王小",
          company: "上海市普陀区金沙江路 1518 弄",
          status: "正常打卡",
        },
        {
          date: "2016-05-04",
          name: "王虎",
          company: "上海市普陀区金沙江路 1517 弄",
          status: "正常打卡",
        },
        {
          date: "2016-05-01",
          name: "王大",
          company: "上海市普陀区金沙江路 1519 弄",
          status: "正常打卡",
        },
        {
          date: "2016-05-03",
          name: "小虎",
          company: "上海市普陀区金沙江路 1516 弄",
          status: "正常打卡",
        },
        {
          date: "2016-05-03",
          name: "大虎",
          company: "上海市普陀区金沙江路 1516 弄",
          status: "正常打卡",
        },
      ],
      activeIndex: 0,
      animateUp:false,
      timer: "",
      output: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: "{c}万元",
        },
        grid: {
          left: "3%",
          right: "10%",
          bottom: 0,
          top: 0,
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          axisLabel: {
            color: "#ccc",
            formatter: "{value}万元",
          },
        },
        yAxis: {
          type: "category",
          data: ["盾构区间", "区间风间", "银河一英里", "华庆路站"],
          axisLabel: {
            color: "#ccc",
          },
        },
        series: [
          {
            name: "产值",
            type: "bar",
            data: [0, 1464.67, 414.12, 828.31],
            color: ["#37A2DA"],
            barWidth: 20,
          },
        ],
      },
    };
  },
  mounted() {
    this.timer = setInterval(this.autoSlide,2000);
    this.echartResize();
  },
  methods: {
    autoSlide() {
      this.animateUp = true;
      setTimeout(()=>{
        this.tableData.push(this.tableData[0])
        this.tableData.shift()
        this.animateUp = false
      },500)
    },
  },
};