<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>
<style>
.box > div {
background-color: #ccc;
height: 300px;
margin-bottom: 5px;
}
.item {
text-align: center;
background-color: yellowgreen !important;
}
.title {
font-size: 25px;
}
</style>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div class="item">
<div class="title animate__animated">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur deleniti architecto sequi, voluptatum aspernatur explicabo aliquid nesciunt recusandae aut nam magnam iste, ullam, tempore eligendi fugiat commodi illum eos! Amet?</div>
</div>
<div>8</div>
<div>
<div class="title animate__animated">dconsectetur adipisicing elit. Tenetur deleniti architecto sequi, voluptatum aspernatur explicabo aliquid nesciunt recusandae aut nam magnam iste, ullam, tempore eligendi fugiat commodi illum eos! Amet?</div>
</div>
<div>10</div>
</div>
<script>
let titleList = document.querySelectorAll(".title");
let IO = new IntersectionObserver(IOCallback);
titleList.forEach((item) => {
IO.observe(item);
});
function IOCallback(entries, observer) {
entries.forEach((item) => {
if (item.isIntersecting) {
console.info("出现在可视区内", item.target);
item.target.classList.add("animate__fadeInUp");
IO.unobserve(item.target);
}
});
}
</script>
</body>
</html>
