feat: 初始化居家上门服务系统完整项目代码
- Spring Boot 后端服务 (hss-home-service) - delivery-miniapp 配送小程序 - website 官网 (Nuxt) - docs 架构设计文档 - Docker 容器化部署配置 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
40
hss-home-service/website/composables/useScrollAnim.ts
Normal file
40
hss-home-service/website/composables/useScrollAnim.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
|
||||
interface ScrollAnimOptions {
|
||||
delay?: number
|
||||
class?: string
|
||||
threshold?: number
|
||||
}
|
||||
|
||||
export function useScrollAnim(options: ScrollAnimOptions = {}) {
|
||||
const { delay = 0, threshold = 0.15 } = options
|
||||
const isVisible = ref(false)
|
||||
let observer: IntersectionObserver | null = null
|
||||
|
||||
function observe(el: Element, overrides: ScrollAnimOptions = {}) {
|
||||
const d = overrides.delay ?? delay
|
||||
const cls = overrides.class ?? 'flow-visible'
|
||||
observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
setTimeout(() => {
|
||||
entry.target.classList.add(cls)
|
||||
}, d)
|
||||
observer?.unobserve(entry.target)
|
||||
}
|
||||
})
|
||||
},
|
||||
{ threshold }
|
||||
)
|
||||
observer.observe(el)
|
||||
}
|
||||
|
||||
function unobserveAll() {
|
||||
observer?.disconnect()
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => unobserveAll())
|
||||
|
||||
return { isVisible, observe, unobserve: unobserveAll }
|
||||
}
|
||||
Reference in New Issue
Block a user