aidlab/Code-Create
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

custom-animation

Browse Source
This commit is contained in:
李志鹏
2026-05-15 12:16:15 +08:00
parent 99af8da607
commit 85708bb5a4
1 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/directives/custom-animation.js
View File

@@ -40,6 +40,7 @@ const T = {
rotateZ: 'rotate-z', rotateZ: 'rotate-z',
opacity_s: 'opacity-s', opacity_s: 'opacity-s',
opacity: 'opacity', opacity: 'opacity',
once: 'once',
} }
const types = Object.values(T) const types = Object.values(T)
const typesStr = types.map(v => `[${v}]`).join(',') const typesStr = types.map(v => `[${v}]`).join(',')
@@ -128,11 +129,15 @@ async function handleScroll({ target: root }) {
const item = els.get(el) const item = els.get(el)
if (!item) return if (!item) return
if (!item.scroll) return if (!item.scroll) return
const children = el.querySelectorAll(typesStr) const children = Array.from(el.querySelectorAll(typesStr))
if (Object.values(T).some(v => hasAttr(el, v))) children.push(el)
if (children.length === 0) return if (children.length === 0) return
const rootEl = isDocumentRoot(root) const rootEl = isDocumentRoot(root)
const elTop_bottom = rootEl.offsetHeight - (el.offsetTop - rootEl.offsetTop - rootEl.scrollTop) const offsetHeight = root === document ? window.innerHeight : rootEl.offsetHeight
const maxHeight = rootEl.offsetHeight + el.offsetHeight const offsetTop = rootEl.offsetTop
const scrollTop = rootEl.scrollTop
const elTop_bottom = offsetHeight - (el.offsetTop - offsetTop - rootEl.scrollTop)
const maxHeight = offsetHeight + el.offsetHeight
const p = Math.min(1, Math.max(0, elTop_bottom / maxHeight)) const p = Math.min(1, Math.max(0, elTop_bottom / maxHeight))
children.forEach((item) => { children.forEach((item) => {
item.style.transition = 'transform 0.5s ease-out' item.style.transition = 'transform 0.5s ease-out'