1. <template>
    2. <div id="box">
    3. <ul id="con1" ref="con1" :class="{ anim: animate == true }">
    4. <li v-for="item in items">{{ item.name }}</li>
    5. </ul>
    6. </div>
    7. </template>
    1. export default {
    2. data() {
    3. return {
    4. animate: false,
    5. items: [{ name: "马云" }, { name: "雷军" }, { name: "王勤" }]
    6. };
    7. },
    8. created() {
    9. setInterval(this.scroll, 1000);
    10. },
    11. methods: {
    12. scroll() {
    13. this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画,所以这里需要设置true
    14. setTimeout(() => {
    15. // 这里直接使用了es6的箭头函数,省去了处理this指向偏移问题,代码也比之前简化了很多
    16. this.items.push(this.items[0]); // 将数组的第一个元素添加到数组的
    17. this.items.shift(); //删除数组的第一个元素
    18. this.animate = false; // margin-top 为0 的时候取消过渡动画,实现无缝滚动
    19. }, 500);
    20. }
    21. }
    22. };
    1. #box {
    2. width: 300px;
    3. // height: 32px;
    4. height: 60px;
    5. overflow: hidden;
    6. padding-left: 30px;
    7. border: 1px solid black;
    8. }
    9. .anim {
    10. transition: all 0.5s;
    11. margin-top: -30px; // 一个 LI 滚动项的 高度
    12. }
    13. #con1 li {
    14. list-style: none;
    15. line-height: 30px;
    16. height: 30px;
    17. }