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 元素在页面加载后立即淡出，而是让类元素“过渡”。

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>

Answer 2

这个怎么样。

var element = document.getElementsByClassName("transition"); 
element.classList.add("fade-out");