时间戳

首页 > 解决方案 > CSS 过渡仅在查看检查后激活 (CTRL+Shift+I)

javascript - CSS 过渡仅在查看检查后激活 (CTRL+Shift+I)

问题描述

最近在我的一个爱好网站上工作，试图更新该网站以包含更多的 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 Element 后才会激活，我也在 Internet Explorer 中尝试过，但发生了同样的问题。这让我相信问题出在代码上。我会很感激这方面的任何帮助，我以前从未遇到过这样的问题，所以我不确定问题可能是什么。

标签： javascripthtmlcss

解决方案

问题是您可能在 HTML 代码之前调用了 javascript，因此当您点击 Inspect Element 时，窗口会调整大小并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>

推荐阅读