剖析Vue实现公告栏文字上下滚动效果背后的原理

前端

2024-02-01 06:55:57

揭秘 Vue 实现公告栏文字上下滚动效果的奥秘

准备踏上技术之旅，我们将共同揭开 Vue 实现公告栏文字上下滚动效果的秘密，深入了解背后的技巧，扩展你的 Vue 技能。

循环执行的奥秘：嵌套 setTimeout

掌握 setInterval 和 setTimeout 的奥秘至关重要。setInterval 可循环执行任务，但为了实现循环滚动，我们需要借助嵌套 setTimeout 。

通过嵌套 setTimeout ，我们创建了一个自循环的机制。一个 setTimeout 函数调用另一个，无限重复。但要防止计时器不断累积，我们需要借助 clearTimeout 清除前一个计时器。

让文字动起来：CSS 动画

有了循环机制，现在让我们让文字动起来。借助 CSS 的 animation 属性，我们可以定义公告栏文字的动画效果。transform 属性则负责改变文字的位置，实现上下滚动。

代码实现：亲手打造滚动公告栏

现在，让我们将理论付诸实践。以下代码示例展示了如何使用 Vue 实现公告栏文字上下滚动效果：

<template>
  <div class="marquee">
    <p>{{ text }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '公告栏文字'
    }
  },
  mounted() {
    this.startMarquee()
  },
  methods: {
    startMarquee() {
      let timer = null
      const el = this.$refs.marquee
      const width = el.offsetWidth
      el.style.animation = `marquee ${width}s linear infinite`
      timer = setTimeout(() => {
        el.style.animation = `marquee-pause ${width}s linear infinite`
        setTimeout(() => {
          el.style.animation = `marquee ${width}s linear infinite`
          this.startMarquee()
        }, width * 1000)
      }, width * 1000)
    }
  }
}
</script>

<style>
.marquee {
  width: 100%;
  overflow: hidden;
}

.marquee p {
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes marquee-pause {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>

常见问题解答：拓展你的理解

为什么使用嵌套 setTimeout？

嵌套 setTimeout 提供了一种循环执行任务的方法，而 setInterval 不能直接实现循环。
如何避免计时器不断累积？

使用 clearTimeout 函数在执行新的嵌套 setTimeout 函数之前清除前一个计时器。
滚动公告栏文字的 CSS 动画是如何实现的？

animation 属性定义动画效果，transform 属性改变文字的位置。
如何自定义滚动速度？

修改 CSS animation 属性中的时间值即可控制滚动速度。
在哪些场景中可以使用公告栏文字滚动效果？

公告栏文字滚动效果广泛应用于网站和应用程序中，用于展示重要信息或吸引用户注意力。