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