vue+css 实现文字向上轮播

1.html

<div class="marquee-wrap">
          <!--  -->
          <ul class="marquee-list" :class="{'animate-up': animateUp}">
            <li v-for="(item, index) in listData" :key="index">
              <p class="img">
                <img src="@/assets/img/img_icon@2x.png" alt />
              </p>
              <p class="time">{{item.medicationTime}}</p>
              <p class="name">{{item.drugName}}</p>
            </li>
          </ul>
        </div>

2.vue

data:

 animateUp: false,
      listData: [
        {
          medicationTime: "20:20",
          drugName: "阿莫西林胶囊1"
        },
        {
          medicationTime: "21:20",
          drugName: "阿莫西林胶囊2"
        },
        {
          medicationTime: "22:20",
          drugName: "阿莫西林胶囊3"
        },
        {
          medicationTime: "23:20",
          drugName: "阿莫西林胶囊4"
        },
        {
          medicationTime: "24:20",
          drugName: "阿莫西林胶囊5"
        }
      ],
      timer: null

mounted() {
    this.timer = setInterval(this.scrollAnimate, 5000);
  },
destroyed() {
    clearInterval(this.timer);
  },
methods: {
        scrollAnimate() {
      this.animateUp = true;
      setTimeout(() => {
        this.listData.push(this.listData[0]);
        this.listData.shift();
        this.animateUp = false;
      }, 4000);
    },

3.css

.marquee-wrap {
  width: 100%;
  height: 25px;
  padding: 2px;
  background: #f7f7f7;
  border-radius: 6px;
  margin: auto;
  overflow: hidden;
  .marquee-list {
    li {
      width: 100%;
      height: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      padding: 0 20px;
      list-style: none;
      text-align: center;
      font-size: 13px;
      font-weight: 400;
      color: rgba(97, 97, 97, 1);
      line-height: 25px;
      display: flex;
    }
    .img {
      width: 15px;
      height: 15px;
      margin: auto 3px;
      padding-right: 5px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .time {
      font-size: 13px;
      font-weight: 400;
      color: rgba(97, 97, 97, 1);
      margin-right: 7px;
    }
  }
  .animate-up {
    transition: all 5s ease-in-out;
    transform: translateY(-25px);
  }
}