文字向上滚动+动画（改进版）

前端时间帮朋友写了个动画效果传送门

朋友用了之后反馈说放到app的webview中有卡顿现象，然后他发我一个改进版，思路差不多

<template>
  <div id="box">
    <ul id="con1" ref="con1" :class="{ anim: animate == true }">
      <li
        class="item"
        :class="{ current: index == 0 }"
        v-for="(item, index) in items"
        :key="index"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      animate: false,
      items: [
        { name: "马云", isActive: true },
        { name: "雷军", isActive: false },
        { name: "马化腾", isActive: false },
        // {name:"王勤4",isActive:false},
        // {name:"雷军1",isActive:false},
        // {name:"王勤2",isActive:false}
      ],
    };
  },
  created() {
    setInterval(this.scroll, 5000);
  },
  mounted() {},
  methods: {
    scroll() {
      this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
      document.getElementsByClassName("item")[1].className = "item okkk";
      setTimeout(() => {
        //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
        this.items.push(this.items[0]); // 将数组的第一个元素添加到数组的
        document.getElementsByClassName("item")[1].className = "item";
        this.items.shift(); //删除数组的第一个元素
        this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      }, 4000);
    },
  },
};
</script>
<style lang="scss" scoped>
#box {
  width: 300px;
  height: 64px;
  overflow: hidden;
  padding-left: 30px;
  border: 1px solid black;
  font-size: 12px;
}
.anim {
  transition: all 4s;
  margin-top: -30px;
}
.okkk {
  transition: all 4s;
  font-size: 20px;
  opacity: 1;
  color: red;
}
#con1 li {
  list-style: none;
  line-height: 30px;
  height: 30px;
  opacity: 0.7;
}
.current {
  color: red;
  font-size: 20px;
}
</style>