<template>
  <div id="list-demo" class="demo">
    <ul>
      <li v-for="(item,index) in items" v-bind:key="index" class="list-complete-item">
        {{ item.txt }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      items: [
        { txt: ", ", show: false, id: 1 },
        { txt: "", show: false, id: 2 },
        { txt: "", show: false, id: 3 },
        { txt: "", show: false, id: 4 },
        { txt: "", show: false, id: 5 },
        { txt: "", show: false, id: 6 },
        { txt: "", show: false, id: 7 },
        { txt: "", show: false, id: 8 },
        { txt: "", show: false, id: 9 },
        { txt: "", show: false, id: 10 },
        { txt: ", ", show: false, id: 1 },
        { txt: "", show: false, id: 2 },
        { txt: "", show: false, id: 3 },
        { txt: "", show: false, id: 4 },
        { txt: "", show: false, id: 5 },
        { txt: "", show: false, id: 6 },
        { txt: "", show: false, id: 7 },
        { txt: "", show: false, id: 8 },
        { txt: "", show: false, id: 9 },
        { txt: "", show: false, id: 10 },

      ]
    };
  },
  mounted() {

  },
  methods: {

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-sharplist-demo{
  height: 100px;
  overflow: hidden;
  position: relative;
  background-color: purple;
}
ul {
  width: 300px;
  height: auto;
  /* overflow: hidden; */
  position: absolute;
  animation: move 4s linear infinite;
  top:0;
  
}
ul>li{
  height: 30px;
  list-style: none;
  margin-bottom: 10px;
  background-color: -sharpeee;
}

@keyframes move{
  0%{
    top:-400px;
  }
  100%{
    top: 0;
  }
}
</style>