IntersectionObserver 延迟脚本在浏览器控制台和 codePen 中工作，不在 WordPress 站点中

Posted 2023-03-28

【中文标题】IntersectionObserver 延迟脚本在浏览器控制台和 codePen 中工作，不在 WordPress 站点中

【英文标题】：IntersectionObserver defer script works in browser console & codePen not in WordPress site

【发布时间】：2021-11-18 03:51:05

【问题描述】：

将 JS 加载到 WordPress 网站时出现问题。它应该使用IntersectionObserver向进入视口的元素添加一个CSS类，以将动画的状态从animation-play-state: paused;更改为animation-play-state: running !important;。在尝试将 ID 更改为类后，以任何可能的方式加载脚本，用$(window).load() 包装它，然后defer 脚​​本在所有内容加载后运行，结果是相同的 - 它不起作用。但如果我将其粘贴到 Firefox 浏览器控制台中，它会起作用。我错过了什么？

const svg = document.querySelectorAll('.animate-me');

observer = new IntersectionObserver((entries) => 
  entries.forEach(entry => 
    if (entry.intersectionRatio > 0) 
      entry.target.classList.add('viewAnim');
     else 
      entry.target.classList.remove('viewAnim');
    
  );
);

svg.forEach(svg => 
  observer.observe(svg);
);

body 
  font-size: 1em;
  color: #ccc;
  text-align: center;
  padding-top: 30px

.scrollspace 
  height: 850px;
  font-size: 3em;
  color: #333;


.container 
  text-align: center;
  padding-bottom: 60px;

#certIcon 
    width: 240px;
position: relative;
top: 25px;

#line1, #line2, #line3  
    stroke-dasharray: 145;
    stroke-dashoffset: 145;
    animation: certline 3s ease forwards;
    animation-play-state: paused;

#line1 
    animation-delay: 0.5s;

#line2 
    animation-delay: 1s;

#line3 
    animation-delay: 1.5s;

@keyframes certline 
  to 
    stroke-dashoffset: 0;
  

.viewAnim 
  animation-play-state: running !important;

SVG icon animation with CSS starts on entering viewport
<div class="scrollspace">
  SCROLL ON 
</div>
<div class="container">
            <p><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 131.1 129.23" id="certIcon" class="style-svg aligncenter replaced-svg svg-replaced-2"><path d="M54.25,92.82A15.4,15.4,0,0,1,54,71l.29-.29a15.77,15.77,0,0,1,11.08-4.58,15.32,15.32,0,0,1,11,4.58,15.68,15.68,0,0,1,0,22.08,15.32,15.32,0,0,1-11,4.58,15.77,15.77,0,0,1-11.08-4.58m31-14.17H81.07l.24-.08c.7-.27,1.89-.77,3.58-1.49s2.65-1.43,2.89-2.13a3,3,0,0,0-.36-2.41,4.33,4.33,0,0,0-1.57-2.17A2.4,2.4,0,0,0,84.24,70a11.78,11.78,0,0,0-2.77,1.33L78.66,73l.16-.32L81.63,70c1.33-1.28,2-2.28,2-3a6.65,6.65,0,0,0-1.36-2.25,4.28,4.28,0,0,0-3-1.28,10.17,10.17,0,0,0-2.44,2.09c-1.21,1.23-2,2.11-2.45,2.65l-.17.32v-.4c.33-.59.85-1.74,1.57-3.46s1-2.92.76-3.61a4.86,4.86,0,0,0-2.08-1.37,4.3,4.3,0,0,0-2-.4c-.7.22-1.46,1.18-2.29,2.89s-1.41,3-1.73,3.7c0-.75.07-2.06,0-3.94s-.28-3.08-.76-3.61a2.28,2.28,0,0,0-1.08-.44,6.59,6.59,0,0,0-1.33-.13,4.33,4.33,0,0,0-2.49.57c-.48.53-.74,1.74-.76,3.61s0,3.19,0,3.94v.24l-.08-.24c-.27-.75-.82-2-1.65-3.7s-1.62-2.67-2.37-2.89a4.46,4.46,0,0,0-2,.44,5.4,5.4,0,0,0-2,1.33c-.27.69-.06,1.9.64,3.61s1.2,2.87,1.52,3.46l.25.4-.41-.32c-.43-.54-1.23-1.42-2.41-2.65a9.33,9.33,0,0,0-2.32-2.11,4.67,4.67,0,0,0-2.89,1.28A5.17,5.17,0,0,0,46.94,67c0,.7.72,1.7,2,3s2.16,2.18,2.65,2.61l.32.32-.4-.16L49,71.29a16.22,16.22,0,0,0-2.57-1.37,2.84,2.84,0,0,0-1.77.48,4.89,4.89,0,0,0-1.61,2.17,3.84,3.84,0,0,0-.4,2.49c.27.65,1.26,1.33,3,2s2.92,1.22,3.62,1.49l.24.08h-.24a36.29,36.29,0,0,0-3.86,0c-1.86.07-3,.25-3.53.68a2,2,0,0,0-.52,1.08,8.39,8.39,0,0,0-.12,1.41,3.3,3.3,0,0,0,.64,2.33c.48.59,1.66.9,3.53.92s3.16,0,3.86,0L45.67,86.5c-1.71.69-2.7,1.34-3,1.92a4.58,4.58,0,0,0,.44,2.7,4.66,4.66,0,0,0,1.57,2.12,3.21,3.21,0,0,0,1.77.57A17.14,17.14,0,0,0,49,92.44L51.52,91l.4-.16L51.6,91c-.49.43-1.37,1.32-2.65,2.66s-2,2.32-2,3a4.22,4.22,0,0,0,1.36,2.17,4.33,4.33,0,0,0,2.88,1.44A9.3,9.3,0,0,0,53.6,98c1.18-1.34,2-2.22,2.41-2.65l.41-.16-.25.32c-.32.59-.83,1.74-1.52,3.46s-.91,2.86-.64,3.45a4.69,4.69,0,0,0,2,1.49,6,6,0,0,0,2,.52c.75-.22,1.54-1.19,2.37-2.93s1.38-3,1.65-3.66l.08-.24v.24a35.63,35.63,0,0,0,0,3.82c.07,1.82.29,3,.8,3.49a3.49,3.49,0,0,0,2.45.72,3.91,3.91,0,0,0,2.41-.72c.48-.48.73-1.65.76-3.49s0-3.12,0-3.82l1.66,3.64q1.2,2.64,2.25,3a5.33,5.33,0,0,0,2-.48,4.36,4.36,0,0,0,2.08-1.53c.22-.59,0-1.74-.76-3.45s-1.24-2.87-1.57-3.46v-.32L76.81,98a10.27,10.27,0,0,0,2.49,2.25,4,4,0,0,0,3-1.52,5.1,5.1,0,0,0,1.36-2.17c0-.65-.68-1.64-2-3s-2.29-2.23-2.77-2.66l-.16-.16,2.81,1.61a10.59,10.59,0,0,0,2.77,1.29,2.58,2.58,0,0,0,1.61-.49,4.51,4.51,0,0,0,1.61-2.12,4.14,4.14,0,0,0,.36-2.7c-.27-.58-1.23-1.23-2.89-1.92L81.31,85a38,38,0,0,0,3.94,0c1.88-.07,3-.32,3.45-.88a3.88,3.88,0,0,0,.64-2.41,4.09,4.09,0,0,0-.64-2.45c-.43-.43-1.58-.66-3.45-.68m-5,24.21a7.2,7.2,0,0,1-1,1.85A6,6,0,0,1,78,105.9,13.65,13.65,0,0,1,76.19,107a9.21,9.21,0,0,1-2.89.56,7,7,0,0,1-2.81-.56,6.44,6.44,0,0,1-1.45,1.2,7.46,7.46,0,0,1-7.46,0A11.81,11.81,0,0,1,60,107a5.62,5.62,0,0,1-2.65.56,9.32,9.32,0,0,1-3-.56,8.93,8.93,0,0,1-3.13-2.31,4.5,4.5,0,0,1-.8-1.85l-9.56,18.07,9.72.73,6.75,7.54L65.65,116,74,129.19l6.27-7.38,10-.89L80.91,103h-.24a.71.71,0,0,1-.4-.16" transform="translate(-0.05 0.03)" style="fill:#9d9d9c"></path><path d="M93.77,91.5H122.1a6.79,6.79,0,0,0,6.8-6.8h0V9a6.82,6.82,0,0,0-6.8-6.8H9.1A6.79,6.79,0,0,0,2.3,9V84.67a6.79,6.79,0,0,0,6.78,6.8H37.19" transform="translate(-0.05 0.03)" style="fill:none;stroke:#9d9d9c;stroke-linecap:round;stroke-width:4.5px"></path><line id="line3" class="line3 animate-me" x1="21.75" y1="42.33" x2="106.75" y2="42.33" style="fill:none;stroke:#e30613;stroke-linecap:round;stroke-width:3.4000000953674316px"></line><line id="line2" class="line2 animate-me" x1="21.75" y1="31.46" x2="106.75" y2="31.46" style="fill:none;stroke:#e30613;stroke-linecap:round;stroke-width:3.4000000953674316px"></line><line id="line1" class="line1 animate-me" x1="21.75" y1="20.59" x2="106.75" y2="20.59" style="fill:none;stroke:#e30613;stroke-linecap:round;stroke-width:3.4000000953674316px"></line><circle cx="65.19" cy="82.1" r="11" style="fill:#c6c6c6"></circle></svg></p>

        </div>

codePen link 测试站点link

【参考方案1】：

所以，我选择了 jQuery + waypoints.js 而不是 IntersectionObserver。

//load waypoints.js script: https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min.js 
    var waypoint = new VcWaypoint(
//select svg 
  element: document.getElementById('animateMe'),
  handler: function() 
//add css class with "animation-play-state: running; .."
    jQuery('.animate-me').addClass('viewAnim');
  ,
// ..on entering viewport
  offset: 'bottom-in-view'
)