CODEWITHSUNDEEP
javascripthtmlcss
Quarismo
Quarismo

Reputation: 7

CSS transition only activates after looking at Inspect (CTRL+Shift+I)

Been working on a hobby site of mine recently, trying to update the site to include more CSS animations to make the site flow a little easier. I've been trying to add a CSS fade in transition to a group of elements that will activate when the elements are in the current viewport.

Now, before the code I will say, the javascript used here is taken from somewhere else, I don't have the experience in javascript to write my own.

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

My issue is that while this code does seem to work as expected, it only activates once I've looked at the Inpsect Element for the web browser, I also tried it in Internet Explorer, but the same problem occured. This leaves me to believe the fault is with the code. I'd appreciate any help on this, I've never encountered an issue like this before so I'm unsure what the problem could be.

Upvotes: 0

Views: 338

Answers (2)

Farhan Asif
Farhan Asif

Reputation: 158

what I'm understanding you facing the problem in running this code. You just need to reorder the code. HTML CSS and then Javascript like below. Copy-paste and check if you got.

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

Upvotes: 0

Guilherme Fernandes Pereira
Guilherme Fernandes Pereira

Reputation: 26

The problem is that you're probably calling the javascript before the HTML code, so when you hit the Inspect Element the window is resized and the resize event is fired.

The recommend order is:

  • CSS
  • HTML
  • Javascript

The snippet bellow shows the order: Javascript, CSS and HTML

But if you run the code and inspect the iframe within, it's rendered different.

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

Upvotes: 1

Related Questions