有时候我们希望可以做出，当浏览到指定位置，弹出元素，并带有入场动画效果
如下图demo所示，此时我们便可以使用IntersectionObserver
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>TOP</h1> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <!-- transition:属性名 动画总时间 动画之前等待时间 --> <!-- 可以使用逗号同时为多个属性添加动画 --> <div id="mydiv" style="background:red; width:100px;height:100px;margin-left:500px; transition:background 3s 0.5s,margin-left 2s; "> </div> <script type="text/javascript"> var div=document.getElementById("mydiv"); function callback(a){//观察器的回调函数 if(a[0].isIntersecting){ div.style.background="blue"; div.style.marginLeft="10px"; } else{ div.style.background="red"; div.style.marginLeft="500px"; } } var x= new IntersectionObserver(callback);//初始化观察器 x.observe(div);//打开观察器 </script> </body> </html>
参考：
https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver
https://cloud.tencent.com/developer/article/1499647