vue 中奖纪录滚动

<template>
  <div id="box">
    <div style="width: 200px;height: 300px;background: #fff">
      <div id="coxxxn1" ref="refRoll" :class="{anim:animate==true}" @mouseenter="mEnter" @mouseleave="mLeave">
        <p v-for="item in items">{{item.name}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {

    data () {
      return {
        animate:false,
        items:[ //消息列表对应的数组
          {name:"马云"},
          {name:"雷军"},
          {name:"王勤1"},
          {name:"王勤2"},
          {name:"王勤3"},
          {name:"王勤4"},
          {name:"王勤5"},
        ],

      }
    },

    mounted () {
      //  每秒执行一次-滚动
      this.rollEvent = setInterval(this._rollApi,1000)
    },

    methods: {
      _rollApi() {
        let refRollDiv = this.$refs.refRoll;

        refRollDiv.style.marginTop = '-30px';

        this.animate = !this.animate;

        var that = this;
        setTimeout(function(){
          that.items.push(that.items[0]);
          that.items.shift();
          refRollDiv.style.marginTop='0px';
          that.animate=!that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
        },500)

      },
      mEnter () {
        clearInterval(this.rollEvent)
      },
      mLeave () {
        this.rollEvent= setInterval(this._rollApi,1000)
      },

    },

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  /**{*/
  /*  margin: 0 ;*/
  /*  padding: 0;*/
  /*}*/
  /*#box{*/
  /*  width: 300px;*/
  /*  height: 175px;*/
  /*  line-height: 30px;*/
  /*  overflow: hidden;*/
  /*  padding-left: 30px;*/
  /*  border: 1px solid black;*/
  /*  transition: all 0.5s;*/
  /*}*/
  .anim{
    transition: all 0.5s;
  }
  /*#con1 li{*/
  /*  list-style: none;*/
  /*  line-height: 30px;*/
  /*  height: 30px;*/
  /*}*/
</style>