Код JS работает неправильно

Нужно чтобы при загрузке страницы автоматически вызывалась функция JS и элемент плавно становился "видимым", вот что мне здесь посоветовали:

HTML: Элемент по умолчанию Opacity 0, transition: 3s ease, id = ElementId

JS

 <script>
 function nameFunc() {
  document.getElementById("ElementId").style.opacity = '1'; 
  }
 document.addEventListener("DOMContentLoaded", nameFunc);
  </script>

Элемент становится "видимым", НО НЕ плавно, а моментально - уже страница загружается с видимым элементом Opacity: 1. Но, если вызывать функцию вручную - всё работает хорошо, анимация работает. В чем проблема? Что я делаю не так?