快捷導(dǎo)航

Vue實現(xiàn)文字上下滾動動畫的示例代碼

更新時間：2024年03月15日 09:00:49 作者：Daiyaosei

這篇文章主要為大家詳細介紹了如何使用Vue實現(xiàn)超酷文字上下滾動動畫,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考下

前言

今天剛好有個需求用到文字滾動的特性，于是去網(wǎng)上看看能不能cv，但是都不太適合，不夠簡單...于是自己寫了個。剛好在掘金這也好久沒發(fā)過文章了，咱也來活躍下（dog

實現(xiàn)原理

vue官方自己實現(xiàn)了一個TransitionGroup動畫組件，下面是官方的描述: <TransitionGroup> 是一個內(nèi)置組件，用于對 v-for 列表中的元素或組件的插入、移除和順序改變添加動畫效果。到這里，朋友們應(yīng)該明白了，我們只需要加一個往上或者往下的css動畫效果，然后利用計時器定時增加和刪除數(shù)據(jù)，TransitionGroup組件就會自己觸發(fā)css動畫效果，完全不需要自己額外操作dom之類的。

但是如果數(shù)據(jù)只有不足4條的情況下，這個動畫效果就無法連貫了，所以在數(shù)據(jù)不足的情況下需要將數(shù)據(jù)填充至4條并增加唯一id。

動畫效果

代碼邏輯

html

<template>
  <div>
    <TransitionGroup name="fade" tag="ul" :duration="1000">
    // 此處ID需要唯一
      <li v-for="(item) in data" :key="item.id">
        【{{ item.user }}】{{ item.age }} //...
      </li>
    </TransitionGroup>
  </div>
</template>

js

import { onMounted, onUnmounted, ref, unref } from "vue";
import { getTransactionToday } from "@/services/common";
import store from "@/store";
import dayjs from "dayjs";

const data = ref([]);
let timer;
const getScrollText = async () => {
  const res = await api()
  data.value = res.data
  return Promise.resolve(res.data);
};

let num = 2000;
const init = async () => {
  clearTimeout(timer);
  await getScrollText();
  if (!unref(data).length) return;
  if ([1,2].includes(unref(data).length)) {
  // 這里的id可以改成其他字段，只要是唯一就行
    for (let i = 0; i < (4-unref(data).length); i++) {
      unref(data).push({ ...unref(data)[0], id: Date.now() + i });
    }
  }
  let delData;
  timer = setInterval(() => {
    if (delData) {
      unref(data).push(delData);
      delData = null;
    } else {
      delData = unref(data)[0];
      unref(data).shift();
    }
  }, num);
};
onMounted(() => {
  init();
});
onUnmounted(() => {
  clearInterval(timer);
});

css

<style scoped lang="scss">
$height: 40px;

.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}

.fade-enter-from {
  transform: translate(0, $height);
}

.fade-leave-to {
  transform: translate(0, -$height);
}

.fade-enter-active,
.fade-leave-active {
  position: absolute;
}
</style>

到此這篇關(guān)于Vue實現(xiàn)文字上下滾動動畫的示例代碼的文章就介紹到這了,更多相關(guān)Vue文字上下滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: