[Vue]單頁錨點導航動畫(anchor navigate animation)，指定卷軸位置觸動事件

 

<template>
  <div>
    <nav class="flex gap-1 w-full bg-white fixed slideNav z-10" :class="{ show }">
      <a class=" cursor-pointer " @click="scrollTo('b')">b</a>
      <a class=" cursor-pointer " @click="scrollTo('c')">c</a>
    </nav>
    <div class="home" ref="home">
      <div class="h-screen bg-red-500" data-scroll data-scroll-call="aEvent" data-scroll-id="aEvent">
        a
      </div>
      <div class="h-screen bg-blue-500" data-scroll data-scroll-call="bEvent" data-scroll-id="bEvent">
        b
      </div>
      <div class="h-screen bg-green-500" data-scroll data-scroll-call="cEvent" data-scroll-id="cEvent">c</div>
    </div>
  </div>
</template>

<script>
import LocomotiveScroll from 'locomotive-scroll';
let scroll
export default {
  data() {
    return {
      show: false
    }
  },
  mounted() {
    scroll = new LocomotiveScroll({
      el: this.$refs.home,
      smooth: true
    });
    scroll.on('call', func => {
      if(func === 'bEvent') {
        this.show = true
      }
    })
    scroll.on('scroll', args => {
      let progressA = 0, progressB = 0, progressC = 0
      if(typeof args.currentElements['aEvent'] === 'object') {
        progressA = args.currentElements['aEvent'].progress;
      }
      if(typeof args.currentElements['bEvent'] === 'object') {
        progressB = args.currentElements['bEvent'].progress;
      }
      if(typeof args.currentElements['cEvent'] === 'object') {
        progressC = args.currentElements['cEvent'].progress;
      }
      if(progressC > 0.1) {
        window.location.hash = 'c'
        this.show = true
      }else if(progressB > 0.1) {
        window.location.hash = 'b'
        this.show = true
      }else if(progressA > 0.1) {
        window.location.hash = 'a'
        this.show = false
      }
    })
    if(location.hash) {
      this.scrollTo(location.hash.replace('#', ''))
    }
  },
  methods: {
    scrollTo(key) {
      const target = document.querySelector(`[data-scroll-id="${key}Event"]`)
      if(!target) return
      scroll.scrollTo(target)
    }
  }
}
</script>

<style scoped lang="scss">
$hide: -90px;
$show: 0px;
@keyframes slideIn {
  0% { top: $hide; }
  100% { top: $show; }
}
@keyframes slideOut {
  0% { top: $show; }
  100% { top: $hide; }
}
.slideNav {
  animation: slideOut .2s linear 0s 1 normal forwards;
  &.show {
    animation: slideIn .2s linear 0s 1 normal forwards;
  }
}
</style>