document.querySelector('.light-on1').addEventListener('click', function() {
  const el = document.querySelector('.container1 img');
  toggle_light_on_display(el);
})
document.querySelector('.light-off1').addEventListener('click', function() {
  const el = document.querySelector('.container1 img');
  toggle_light_off_display(el);
})

function toggle_light_on_display(el) {
  el.style.opacity = '0';
  el.style.display = 'block';
  const to = setTimeout(function() {
    el.style.opacity = '1';
    clearTimeout(to); // lot better to clear timeout when no more use
  }, 200) // this little delay is for the display block to finish
}

function toggle_light_off_display(el) {
  el.style.opacity = '0';
  const to = setTimeout(function() {
    el.style.display = 'none';
    clearTimeout(to); // lot better to clear timeout when no more use
  }, 500) // this delay is the delay of the transition
}

document.querySelector('.light-on2').addEventListener('click', function() {
  const el = document.querySelector('.container2 img');
  toggle_light_on_visibility(el);
})
document.querySelector('.light-off2').addEventListener('click', function() {
  const el = document.querySelector('.container2 img');
  toggle_light_off_visibility(el);
})

function toggle_light_on_visibility(el) {
  el.style.opacity = '0';
  el.style.visibility = 'visible';
  const to = setTimeout(function() {
    el.style.opacity = '1';
    clearTimeout(to); // lot better to clear timeout when no more use
  }, 200) // this little delay is for the visibility visible to finish
}

function toggle_light_off_visibility(el) {
  el.style.opacity = '0';
  const to = setTimeout(function() {
    el.style.visibility = 'hidden';
    clearTimeout(to); // lot better to clear timeout when no more use
  }, 500) // this delay is the delay of the transition
}

.container1 img {
  display: none;
  transition: 500ms ease-in all;
}

.container2 img {
  visibility: hidden;
  transition: 500ms ease-in all;
}

<button class="light-on1">light-on display</button>
<button class="light-off1">light-off display</button>
<div class="container1">
  <img src="https://picsum.photos/id/20/800/600" alt="">
</div>

<button class="light-on2">light-on visibility</button>
<button class="light-off2">light-off visibility</button>
<div class="container2">
  <img src="https://picsum.photos/id/30/800/600" alt="">
</div>

这里有两个版本，显示和可见性。
要查看实际的用法差异，在HTML中，将容器2和按钮2的块放在1之前。
对于代码，我留下了开和关作为2个功能，可以分组为1作为一个切换功能。检测可以在第一种情况下对样式的不透明度和第二种可见性。
你可以玩延迟。注意，有一个小的延迟时，把显示和可见性可见。浏览器需要很少的时间来呈现。
您可以播放图像上的过渡及其延迟。如果您更改过渡时间，请相应地更改关闭延迟。
您可以很容易地将其应用于您的代码。

好的新片段，我混合了2个功能在1使用您的html

function myFunction() {
  const lightsOff = document.querySelector("#lights-off");
  const lightsOn = document.querySelector("#lights-on");
  if (lightsOff.style.display === 'none') {
    toggle_light_display('off');
  } else {
    toggle_light_display('on');
  }
}

function toggle_light_display(test) {
  let el1, el2;
  if (test === 'off') {
    el1 = document.querySelector("#lights-on");
    el2 = document.querySelector("#lights-off");
  } else {
    el1 = document.querySelector("#lights-off");
    el2 = document.querySelector("#lights-on");
  }
  el1.style.opacity = '0';
  let to = setTimeout(function() {
    el1.style.display = 'none';
    clearTimeout(to);
    el2.style.opacity = '0';
    el2.style.display = 'block';
    to = setTimeout(function() {
      el2.style.opacity = '1';
      clearTimeout(to);
    }, 200)
  }, 500)
}

img {
  transition: 500ms ease-in all;
}

<div>
  <button class="darkmodebtn" onclick="myFunction()">switch</button>
</div>
<div>
  <img id="lights-off" src="https://picsum.photos/id/20/800/600" alt="" style="display: none;">
  <img id="lights-on" src="https://picsum.photos/id/30/800/600" alt="">
</div>