Vue实现文字上下滚动动画的示例代码
作者：Daiyaosei
这篇文章主要为大家详细介绍了如何使用Vue实现超酷文字上下滚动动画,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下
前言
今天刚好有个需求用到文字滚动的特性，于是去网上看看能不能cv，但是都不太适合，不够简单...于是自己写了个。刚好在掘金这也好久没发过文章了，咱也来活跃下（dog
实现原理
vue官方自己实现了一个TransitionGroup动画组件， 下面是官方的描述: <TransitionGroup> 是一个内置组件，用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。 到这里，朋友们应该明白了，我们只需要加一个往上或者往下的css动画效果，然后利用计时器定时增加和删除数据，TransitionGroup组件就会自己触发css动画效果，完全不需要自己额外操作dom之类的。
但是如果数据只有不足4条的情况下，这个动画效果就无法连贯了，所以在数据不足的情况下需要将数据填充至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>
到此这篇关于Vue实现文字上下滚动动画的示例代码的文章就介绍到这了,更多相关Vue文字上下滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！