-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
46 lines (44 loc) · 1.78 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/**
*
* @param {string} selectors 选择器名称
* @param {string|string[]} startAnimationClass 起始状态类名
* @param {string|string[]} endAnimationClass 结束状态类名
* @param {boolean} unobserve observe后是否取消observe, 默认为 true
* @param {object} options 同 IntersectionObserver 构造器的 options 参数
* @returns {object} 返回一个 IntersectionObserver 实例
*/
export function addAnimation(selectors, startAnimationClass, endAnimationClass, options, unobserve = true) {
if (!startAnimationClass || !endAnimationClass) {
throw new Error('startAnimationClass 或 endAnimationClass 不能为空')
}
const isOptions =
Object.prototype.toString.call(options) === '[object Object]' ||
Object.prototype.toString.call(options) === '[object Undefined]' ||
Object.prototype.toString.call(options) === '[object Null]'
if (!isOptions) {
console.error('addAnimation function: options 参数类型必须是对象!')
options = {}
}
const io = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add(...[endAnimationClass].flat())
if (unobserve) {
io.unobserve(entry.target)
}
} else {
// 当元素移出视口时, 将元素的类重置为初始时的状态, 即 移除结束状态的类名
entry.target.classList.remove(...[endAnimationClass].flat())
}
})
}, options)
const elements = document.querySelectorAll(selectors)
if (!elements.length) {
console.error('addAnimation function: 获取不到目标元素, 请检查所传的 [选择器名称] 是否正确或 [异步问题]')
}
elements.forEach(el => {
el.classList.add(...[startAnimationClass].flat())
io.observe(el)
})
return io
}