javascript - 如何在页面加载完成后为特定元素创建淡出效果？

Question

我正在尝试在页面加载完成后为特定的 div 元素创建淡出效果。不幸的是我没有让它工作。

它适用于 body 但不适用于 div 元素。

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

总而言之:我不想让整个 body 元素在页面加载后立即淡出，而是让类元素“transition”淡出。

Answer 1

document.getElementsByClassName('.transition') 返回 HTMLElements 的集合，而不是单个元素。

使用document.querySelector选择单个元素。

$('.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>

-- 编辑--

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>