Javascript CSS转换仅在查看Inspect后激活（CTRL+；Shift+；I）_Javascript_Html_Css

Javascript CSS转换仅在查看Inspect后激活（CTRL+；Shift+；I）

javascript html css

Javascript CSS转换仅在查看Inspect后激活（CTRL+；Shift+；I）,javascript,html,css,Javascript,Html,Css,最近一直在我的一个爱好网站上工作，试图更新该网站以包含更多的CSS动画，从而使该网站的流量更容易。我一直在尝试向一组元素添加CSS淡入过渡，这些元素在当前视口中时将被激活现在，在编写代码之前，我会说，这里使用的javascript是从其他地方获取的，我没有编写自己的javascript的经验 JavaScript: (function() { var elements; var windowHeight; function init() { elements = docu

最近一直在我的一个爱好网站上工作，试图更新该网站以包含更多的CSS动画，从而使该网站的流量更容易。我一直在尝试向一组元素添加CSS淡入过渡，这些元素在当前视口中时将被激活

现在，在编写代码之前，我会说，这里使用的javascript是从其他地方获取的，我没有编写自己的javascript的经验

JavaScript:

(function() {
  var elements;
  var windowHeight;

  function init() {
    elements = document.querySelectorAll('.hidden');
    windowHeight = window.innerHeight;
  }

  function checkPosition() {
    for (var i = 0; i < elements.length; i++) {
      var element = elements[i];
      var positionFromTop = elements[i].getBoundingClientRect().top;

      if (positionFromTop - windowHeight <= 0) {
        element.classList.add('fade-in-element');
        element.classList.remove('hidden');
      }
    }
  }

  window.addEventListener('scroll', checkPosition);
  window.addEventListener('resize', init);

  init();
  checkPosition();
})();

我的问题是，虽然这段代码看起来确实像预期的那样工作，但它只有在我查看了web浏览器的inSect元素后才会激活，我也在Internet Explorer中尝试过它，但同样的问题也发生了。这让我相信错误在于代码。如果您能在这方面提供帮助，我将不胜感激，因为我以前从未遇到过这样的问题，所以我不确定问题可能是什么。

问题是您可能在HTML代码之前调用javascript，因此当您点击Inspect元素时，窗口会调整大小，并触发

resize

事件

建议的顺序是：

CSS
HTML
Javascript

下面的代码片段显示了顺序：Javascript、CSS和HTML

但是，如果运行代码并检查其中的iframe，则会呈现不同的结果

（函数（）{
var元素；
窗高；
函数init（）{
elements=document.querySelectorAll（'.hidden'）；
windowHeight=window.innerHeight；
}
函数checkPosition（）{
对于（var i=0；i如果（positionFromTop-windowHeight我理解您在运行此代码时面临的问题。您只需要重新排序code.HTML CSS，然后像下面一样重新排序Javascript。复制粘贴并检查是否有
<html>
    <head>
        <title>This is</title>

        <style>
            @keyframes fade-in {
                from { opacity: 0; transform: scale(.7,.7) }
                to { opacity: 1; }
            }
            .social-div { float:left; width:33%; text-align:center; }
            .fade-in-element { animation-name: fade-in; animation-duration:2s; }
            .hidden { opacity:0; }
        </style>

    </head>

    <body>
        <div class="social-div hidden">
            <img class="socials" src="<?php echo get_site_url(''); ?>/wp-content/uploads/2020/07/social-fb.png" />
                
            <p class="socials-text">@[Enter Social Here]</p>
        </div>

        <script>
            (function() {
                var elements;
                var windowHeight;

                function init() {
                    elements = document.querySelectorAll('.hidden');
                    windowHeight = window.innerHeight;
                }

                function checkPosition() {
                    for (var i = 0; i < elements.length; i++) {
                    var element = elements[i];
                    var positionFromTop = elements[i].getBoundingClientRect().top;

                    if (positionFromTop - windowHeight <= 0) {
                        element.classList.add('fade-in-element');
                        element.classList.remove('hidden');
                    }
                    }
                }

                window.addEventListener('scroll', checkPosition);
                window.addEventListener('resize', init);

                init();
                checkPosition();
                })();
        </script>
    </body>
</html>


这是
@关键帧淡入{
从{opacity:0；transform:scale（.7，.7）}
到{opacity:1；}
}
.social div{float:left；width:33%；text align:center；}
.fade-in元素{动画名称：fade-in；动画持续时间：2s；}
.hidden{不透明度：0；}
/wp content/uploads/2020/07/social fb.png/>
@[在此处输入社交信息]
（功能（）{
var元素；
窗高；
函数init（）{
elements=document.querySelectorAll（'.hidden'）；
windowHeight=window.innerHeight；
}
函数checkPosition（）{
对于（var i=0；i如果（positionFromTop-windowHeight听起来像是OpenDev工具触发了一个调整大小的事件，并发挥了神奇的作用，尝试在init函数中添加一个元素的控制台日志，并看到第一个日志的返回。非常感谢，很偶然，你知道如何添加惊人的动画延迟吗I don’我不希望每一个变量都出现在前一个变量之后半秒。您必须稍微更改javascript。首先，将变量的de声明从var
更改为let
和const
，这是ES6标准，它有助于处理变异状态。然后，您可以在中使用setTimeout
，用于以添加和删除类。工作小提琴：有关var
、let
和const的详细信息：
@keyframes fade-in {
    from { opacity: 0; transform: scale(.7,.7) }
    to { opacity: 1; }
}
.social-div { float:left; width:33%; text-align:center; }
.fade-in-element { animation-name: fade-in; animation-duration:2s; }
.hidden { opacity:0; }

<html>
    <head>
        <title>This is</title>

        <style>
            @keyframes fade-in {
                from { opacity: 0; transform: scale(.7,.7) }
                to { opacity: 1; }
            }
            .social-div { float:left; width:33%; text-align:center; }
            .fade-in-element { animation-name: fade-in; animation-duration:2s; }
            .hidden { opacity:0; }
        </style>

    </head>

    <body>
        <div class="social-div hidden">
            <img class="socials" src="<?php echo get_site_url(''); ?>/wp-content/uploads/2020/07/social-fb.png" />
                
            <p class="socials-text">@[Enter Social Here]</p>
        </div>

        <script>
            (function() {
                var elements;
                var windowHeight;

                function init() {
                    elements = document.querySelectorAll('.hidden');
                    windowHeight = window.innerHeight;
                }

                function checkPosition() {
                    for (var i = 0; i < elements.length; i++) {
                    var element = elements[i];
                    var positionFromTop = elements[i].getBoundingClientRect().top;

                    if (positionFromTop - windowHeight <= 0) {
                        element.classList.add('fade-in-element');
                        element.classList.remove('hidden');
                    }
                    }
                }

                window.addEventListener('scroll', checkPosition);
                window.addEventListener('resize', init);

                init();
                checkPosition();
                })();
        </script>
    </body>
</html>