CSS 过渡仅在查看检查后激活（CTRL+Shift+I）

Question

最近在我的一个爱好网站上工作，试图更新该网站以包含更多 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();
})();

HTML：

<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>

CSS：

@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; }

我的问题是，虽然此代码似乎确实按预期工作，但它仅在我查看 web 浏览器的 Inpsect 元素后才会激活，我也在 Internet Explorer 中尝试过，但出现了同样的问题。 这让我相信问题出在代码上。 我会很感激这方面的任何帮助，我以前从未遇到过这样的问题，所以我不确定问题可能是什么。

Answer 1

问题是您可能在 HTML 代码之前调用了 javascript，因此当您点击检查元素时，window 被调整大小并触发resize事件。

推荐顺序是：

CSS
HTML
Javascript

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

但是，如果您运行代码并检查其中的 iframe，它的呈现方式会有所不同。

 (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(); })();

 .body { height: 1000px; border: 1px dashed blue; } @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; }

 <div class="body"></div> <div class="social-div hidden"> <img class="socials" src="https://facebookbrand.com/wp-content/uploads/2019/04/f_logo_RGB-Hex-Blue_512.png?w=36&h=36" /> <p class="socials-text">@[Enter Social Here]</p> </div>

Answer 2

我了解您在运行此代码时遇到的问题。 您只需要重新排序代码。 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>

CSS 过渡仅在查看检查后激活（CTRL+Shift+I）

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-07-21 19:46:41

解决方案2
0 2020-07-21 19:52:33

CSS 过渡仅在查看检查后激活（CTRL+Shift+I）

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-07-21 19:46:41

解决方案2 0 2020-07-21 19:52:33

解决方案1
1 已采纳 2020-07-21 19:46:41

解决方案2
0 2020-07-21 19:52:33