javascript - 在滚动条上闪烁图像

Question

我的目的是让图像在滚动时闪烁 3 次(例如灯亮起然后熄灭，连续 3 次，延迟 1 秒)，然后保持亮起状态，直到用户向下滚动超过 3600 像素。

我添加了事件监听器:

created() {
  window.addEventListener('scroll', this.scrollAnimation)
}

滚动时我触发方法scrollAnimation:

methods: {
  scrollAnimation() {
    let currentPos = window.pageYOffset
    if (currentPos > 3000 && currentPos < 3600) {
      this.$refs.supportOff.style.display = 'none'
      this.$refs.supportOn.style.display = 'block'
    } else {
      this.$refs.supportOff.style.display = 'block'
      this.$refs.supportOn.style.display = 'none'
    }
  }
}

这是图像的模板:

<div class="support__image-wrapper">
  <img ref="supportOff" class="support__image support__image_on" src="../../assets/images/247-off.png">
  <img ref="supportOn" class="support__image support__image_off" src="../../assets/images/247-on.png">
</div>

现在这段代码可以工作，当我向下滚动 3000 像素但不低于 3600 像素时，它显示 247-on 图像并隐藏 247-off 图像。但是，闪烁有一个问题，如果我使用 setInterval ，每次用户在 3000 到 3600 像素之间滚动时，它都会被触发。实现眨眼的最佳方法是什么？

Answer 1

一些值得尝试的事情...

1. 不要开始使用 $ref 操作 dom

相反，创建一个将触发 dom 中的更改的变量

methods: {
  scrollAnimation() {
    this.showSupport = window.pageYOffset > 3000 && window.pageYOffset < 3600
  }
}

<div>
  <img v-if="showSupport" class="blink" src="../../assets/images/247-on.png">
  <img v-else src="../../assets/images/247-off.png">
</div>

闪烁 我建议使用 css 动画 (@keyframes)。这样您就可以控制眨眼的时间，而无需在脚本中添加任何内容。一旦在页面上可见，它就会开始闪烁。

.blink {
  animation: blink 1s infinite;
}

@keyframes blink {
    0% {opacity: 0}
    49%{opacity: 0}
    50% {opacity: 1}
}

希望这有帮助。