提示消息无缝向上滚动（vue）

<div class="order-tips__message-item"
        :class="getClass(index)"
        v-for="(orderTip, index) in tips"
        :key="index">
        {{orderTip[3]}}
</div>

 

<script>
export default {
  props: ['lbxxzsList', 'orderNum'],
  data() {
    return {
      index: 0,
　　　 tips: ['提示1', '提示2', '提示3']
    };
  },
  computed: {
    maxIndex() {
      return this.tips.length - 1;
    },
  },
  methods: {
    getClass(index) {
      if (this.maxIndex === 0) {
        return {};
      }
      return {
        'order-tips__message-item--slidein': index === this.index,
        'order-tips__message-item--slideout': index === (this.index - 1) || (this.index === 0 && index === this.maxIndex),
      };
    },
  },
  mounted() {
    setInterval(() => {
      const { index, maxIndex } = this;
      this.index = index < maxIndex ? index + 1 : 0;
    }, 5000);
  },
};
</script>

 

.order-tips__message {
  position: relative;
}
.order-tips__message-item {
  position: absolute;
  top: 17px;
  opacity: 0;
}
.order-tips__message-item--slidein {
  top: 0;
  opacity: 1;
  transition: top 1s, opacity 1s;
}
.order-tips__message-item--slideout {
  top: -16px;
  opacity: 0;
  transition: top 1s, opacity 1s;
}