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

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 元素在页面加载后立即淡出，而是让 class 元素 "transition".

Answer 1

这个怎么样。

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

Answer 2

document.getElementsByClassName('.transition') return HTML 元素的集合，而不是单个元素。

使用document.querySelector到select单个元素。

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

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

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

html

javascript

css

transition

fade