How to create a fade-out-in effect for specific elements when the page is done loading?

Question

I'm trying to create a fade-out-in effect for a specific div element when the page is done loading. Unfortunately I didn't get it to work.

It works with body but not for a div element.

$(function() {
  $('.transition').removeClass('fade-out');
});
$(function() {
  $('body').removeClass('fade-out');
});

body {
  opacity: 1;
  transition: 1s opacity;
}

body.fade-out {
  opacity: 0;
  transition: none;
}

.transition {
  opacity: 1;
  transition: 1s opacity;
}

.transition fade-out {
  opacity: 0;
  transition: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  document.body.className += ' fade-out';
</script>



<div class="transition">
  <script>
    document.getElementsByClassName('.transition') += 'fade-out';
  </script>
  <p>TEST</p>
</div>

In conclusion: I don't want to have the whole body element to fade-out as soon as the page loads but rather for the class element "transition".

Answer 1

document.getElementsByClassName('.transition') return collection of HTMLElements, instead of single element.

Use document.querySelector to select single element.

$('.transition').removeClass('fade-out');

.transition {
  opacity: 1;
  transition: 1s opacity;
}

.transition.fade-out {
  opacity: 0;
  transition: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="transition fade-out">
  <p>TEST</p>
</div>

-- Edit --

document.querySelectorAll('.transition, .canvas')
  .forEach((ele) => {
    console.log('Before: ', ele);
    ele.classList.remove('fadeout');
    console.log('After: ', ele);
  });

<div class="transition fadeout">Transition</div>
<div class="canvas fadeout">Canvas</div>