vue实现文字上下无缝滚动动画

实现原理:在滚动时需要将第一个元素,添加到元素的最后,并将第一个元素删除。定义一个变量控制动画效果。

<template>
  <div class="marquee-wrap">
    <ul class="marquee-list" :class="{ 'animate-up': obj.animateUp }">
      <li v-for="item in obj.arr">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
let obj = reactive({
  arr: [
    "********已获奖金60元",
    "********已获奖金40元",
    "************ 成功邀请1人 已获奖金5元",
  ],
  count: 0,
  animateUp: false,
});
const props = withDefaults(defineProps<{ time: number; textTime?: number }>(), {
  textTime: 500,
});
let timer: any = null;
function scrollAnimate() {
  const { animateUp, arr } = toRefs(obj);
  animateUp.value = true;
  setTimeout(() => {
    arr.value.push(arr.value[0]);
    arr.value.shift();
    animateUp.value = false;
  }, props.textTime);
}
timer = setInterval(scrollAnimate, props.time);

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style scoped lang="scss">
.marquee-wrap {
  width: 80%;
  height: 40px;
  border-radius: 20px;
  box-shadow: var(--el-box-shadow-light);
  margin-bottom: 20px !important;
  background: rgba($color: #fff, $alpha: 1);
  margin: 0 auto;
  overflow: hidden;
  .marquee-list {
    li {
      width: 100%;
      height: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      padding: 0 20px;
      list-style: none;
      line-height: 40px;
      text-align: center;
      font-size: 18px;
      font-weight: 400;
    }
  }
  .animate-up {
    transition: all 0.5s ease-in-out;
    transform: translateY(-40px);
  }
}
</style>

补充功能:当鼠标移入时,停止滚动。鼠标移除时,继续滚动

<li
     @mouseover="handleMethods"
     @mouseleave="handelLeave"
     v-for="item in obj.arr"
  >
        {{ item }}
</li>

// 移入鼠标
const handleMethods = () => {
  clearInterval(timer);
};
// 移除鼠标
const handelLeave = () => {
  timer = setInterval(scrollAnimate, props.time);
};
  • 0
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Vue.js是一种流行的JavaScript框架,用于构建用户界面。要实现无缝滚动效果,可以使用Vue.js的transition组件和CSS动画实现。 首先,你需要在Vue组件中定义一个包含滚动内容的容器,并设置其样式为`overflow: hidden`,以隐藏超出容器的内容。然后,在容器内部创建一个滚动元素,设置其样式为`white-space: nowrap`,以使内容水平排列。 接下来,你可以使用Vue的transition组件来添加过渡效果。在滚动元素上添加一个`v-if`指令,根据条件来决定是否显示滚动元素。当需要滚动时,将滚动元素的内容复制一份,并将其追加到滚动元素的末尾,形成一个无限循环的效果。 然后,你可以使用CSS动画实现滚动效果。通过给滚动元素添加一个`transform`属性,并使用`translateX`函数来实现水平位移。同时,使用`animation`属性来定义动画的持续时间、缓动函数等。 最后,在Vue组件中使用定时器或者其他方式来触发滚动效果。可以通过改滚动元素的`transform`属性的值来实现滚动效果。 下面是一个简单的示例代码: ```html <template> <div class="scroll-container"> <div class="scroll-content" v-if="isScrolling"> {{ content }} </div> </div> </template> <script> export default { data() { return { content: '这是滚动的内容', isScrolling: true }; }, mounted() { setInterval(() => { // 每隔一段时间改变滚动元素的transform属性值,实现滚动效果 }, 3000); } }; </script> <style> .scroll-container { width: 300px; height: 200px; overflow: hidden; } .scroll-content { white-space: nowrap; animation: scrollAnimation 10s linear infinite; } @keyframes scrollAnimation { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } </style> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

成序猿@

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值