In the vue project, the message is updated and scrolled from top to bottom

Statement of needs

Only two pieces of data are displayed in one box. After new data arrives, the new data is automatically placed on the top layer, and the original data is pushed down by sliding from top to bottom.

Implementation ideas

I summed it up. My idea is probably a four-digit carousel. I drew a picture for everyone to understand better. There are four positions in 1234. The initial message is only two messages in positions 2 and 3. When sliding There are at most 3 messages at the same time, don't rush to realize it, just read down slowly.
insert image description here

1. Draw the required page structure and style first

HTML

<div
    class="lunboBox"
    :style="{ height: height * lineNum + 'px' }"
    @mouseover="mouseOver"
    @mouseleave="mouseLeave"
  >
    <div
      :class="['lunbo', { 'lunbo_unanim': stop }]"
      ref="lunbo"
      style="bottom: 0"
    >
      <div v-for="(item, index) in msgList" :key="index" class="messages">
        <msgItem :messageObj="item"></msgItem>
      </div>
    </div>
  </div>

CSS

<style scoped lang="less">
.lunboBox {
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.lunbo {
  position: absolute;
  left: 0;
  overflow: hidden;
  transition: bottom 1s linear;
  display: flex;
  flex-direction:column-reverse;
}
.lunbo_unanim {
  transition: none;
}
</style>

Variables that JS
needs to declare

data() {
    return {
      height: 100,
      stop: true,
      lineNum: 2,
      timer2: null,
      msgList: [], //页面中数据
      newMsgList: [],   //新数据数组
    };
  },

Design ideas

Initially there are only two divs, 2 and 3. When a new message comes, add new data at the head of the array, which is 1.
Turn on the animation switch to modify the height value of the 123 large box, the div slides down, and after the sliding is completed, delete the bottom 3div.
Stop the animation, change the bottom to 0, and return to the initial position.
The following is the encapsulation method according to this idea. Since our needs require flickering, I did not show the flickering logic in the code, and I have deleted the flickering code. The animation
method

move(item) {
      if (this.timer2) {
        clearTimeout(this.timer2);
        this.timer2 = null;
      }
      let that = this;
      let lunbo = this.$refs.lunbo;
      this.stop = false;
      // this.msgList.unshift(item);
      this.msgList.push(item);
      //是轮播div向下滑动
      lunbo.style.bottom = "-" + this.height + "px";
      // console.log(JSON.parse(JSON.stringify(this.msgList)))
      //滑动执行完删除msgList尾部数据,把动画停掉后把bottom改为0(时间要稍稍大于动画时间1s即可)
      this.timer2 = setTimeout(() => {
        // that.msgList.pop();
        that.msgList.shift();
        that.stop = true;
        lunbo.style.bottom = 0;
        //执行完成清除延时器
        clearTimeout(that.timer2);
        that.timer2 = null;
      }, 1050);
    },