无法实现滚动时淡入淡出？

.fade-in-out {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.fade-in-out.active {
  opacity: 1;
}

window.addEventListener('scroll', function() {
  var element = document.getElementById('target-element');
  var elementPosition = element.getBoundingClientRect().top;
  var windowHeight = window.innerHeight;

  if (elementPosition < windowHeight) {
    element.classList.add('active');
  } else {
    element.classList.remove('active');
  }
});