IntersectionObserver是浏览器原生提供的构造函数，接受两个参数：callback是可见性变化时的回调函数，option是配置对象（该参数可选）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6"></script> -->
<title>intersectionObserver</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
margin: 0 auto;
max- 100%;
600px;
}
#top {
height: 600px;
background-color: #aaaaaa;
}
#middle {
margin-top: 200px;
opacity: 0;
height: 800px;
background-color: #000000;
}
#bottom {
height: 200px;
background-color: #333;
}
div.move,
#top.move,
#middle.move,
#bottom.move {
animation: movefromleft 2s;
animation-fill-mode: forwards;
}
@keyframes movefromleft {
from {
opacity: 0;
transform: translateX(-300px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
</style>
</head>
<body>
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
<div id="b_B"></div>
</body>
<script>
window.onload = (event) => {
const middle = document.getElementById('middle'),
top = document.getElementById('top'),
bottom = document.getElementById('bottom');
var last = document.getElementById('b_B')
const animationClass = 'move';
// 创建监听
const intersectionObserver = new IntersectionObserver((entries) => {
for (entry of entries) {
if (entry.target.id == 'b_B' && entry.intersectionRatio > 0) {
var c = document.createElement('div');
c.style.cssText = "border:1px solid black; background-color: pink; height: 100px;";
document.querySelector('body').appendChild(c)
bottom.parentNode.insertBefore(c, bottom)
intersectionObserver.observe(c);
addAnimationClass(entry.target, animationClass)
}
if (entry.intersectionRatio > 0) {
console.log('====================================');
console.log(entry.target);
console.log('====================================');
addAnimationClass(entry.target, animationClass);
} else {
removeAnimationClass(entry.target, animationClass);
}
}
});
// let attributesChangeEl = document.querySelector("body")
// let config = { childList: true }
// let observer1 = new MutationObserver(mutationsList => {
// last = mutationsList[0].addedNodes[0]
// })
// observer1.observe(attributesChangeEl, config)
// 添加动画class的操作
function addAnimationClass(elem, animationClass) {
elem.className.includes(animationClass) ? 1 : elem.className = elem.className + animationClass;
}
// 移除动画class的操作
function removeAnimationClass(elem, animationClass) {
elem.className.includes(animationClass) ? elem.className = elem.className.replace(animationClass, '') : 1;
}
// 开启监听
intersectionObserver.observe(top);
intersectionObserver.observe(middle);
intersectionObserver.observe(last);
}
</script>
</html>