vue-div，文字无限滚动效果

<template>
  <div>
    <div class="father-cont">
      <ul class="fa-scroll-cont" id="scroll-box">
        <li v-for=" item in list" :key="item.name">
          <span>{{item.name}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.father-cont {
  margin-left: 300px;
  width: 200px;
  height: 100px;
  overflow: hidden;
}
.fa-scroll-cont {
  border: 1px solid red;

  li {
    width: 100%;
    padding: 10px auto;
    border-bottom: 1px solid #999999;
  }
}
</style>

可以看出来DOM结构

<script>
export default {
  name: '',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      list: [
        { name: '小A', city: 'AAAAAAAAAAAAAAAAAAAAAAAAA' },
        { name: '小B', city: 'AAAAAAAAAAAAAAAAAAAAAAAAA' },
        { name: '小C', city: 'AAAAAAAAAAAAAAAAAAAAAAAAA' },
        { name: '小D', city: 'AAAAAAAAAAAAAAAAAAAAAAAAA' },
        { name: '小E', city: 'AAAAAAAAAAAAAAAAAAAAAAAAA' },
        { name: '小F', city: 'AAAAAAAAAAAAAAAAAAAAAAAAA' },
        { name: '小G', city: 'AAAAAAAAAAAAAAAAAAAAAAAAA' },
        { name: '小H', city: 'AAAAAAAAAAAAAAAAAAAAAAAAA' },
        { name: '小I', city: 'AAAAAAAAAAAAAAAAAAAAAAAAA' },
        { name: '小J', city: 'AAAAAAAAAAAAAAAAAAAAAAAAA' }
      ]
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.scroll();
  },
  destroyed() {},
  methods: {
    scroll() {
      const dom = document.getElementById('scroll-box');
      const that = this;
      let timer = null;
      const animationEndHandler = evt => {
        const dom = document.getElementById('scroll-box');
        dom.style.cssText = 'transform:translate(0,0)';
        dom.appendChild(dom.children[0]); //把第一个DOM添加到最后一个去
      };
      const mouseEnterHander = evt => {
        clearInterval(timer);
      };
      const initInterval = () => {
        timer = setInterval(() => {
          if (dom.children[0]) {
            let scrollHeight = dom.children[0].offsetHeight;
            scrollHeight = parseInt(scrollHeight);
            dom.style.cssText = `transform:translate(0px,-${scrollHeight + 8}px);transition:all 2s ease;`;
          }
        }, 3000);
      };
      const mouseLeaveHandler = () => {
        initInterval();
      };
      dom.addEventListener('mouseenter', mouseEnterHander);
      dom.addEventListener('mouseleave', mouseLeaveHandler);
      dom.removeEventListener('transitionend', animationEndHandler);
      dom.addEventListener('transitionend', animationEndHandler); //只要监听到translate就会执行,这样就能一直动了
      initInterval();
    }
  }
};
</script>

最主要的为

dom.addEventListener('transitionend' 写法