如何使用切换按钮使图像平滑过渡

Question

我使用 transition 来使更改变得平滑并且它正在工作，但是对于图像我无法设置好。 我怎样才能解决这个问题？

我试过这个：

var lightsOff = document.querySelector("#lights-off");
var lightsOn = document.querySelector("#lights-on");
lightsOff.style.display = "block";
lightsOn.style.display = "none";

和这个：

var lightsOff = document.querySelector("#lights-off");
var lightsOn = document.querySelector("#lights-on");
lightsOff.style.display = "none";
lightsOn.style.display = "block";

这是完整的代码：

 function myFunction() { var elements = document.querySelectorAll(".one, .three, .five"); elements.forEach(function(element) { element.classList.toggle("dark-mode"); if (element.classList.contains("dark-mode")) { if (element.classList.contains("one")) { var logoElement = element.querySelector('.logo'); var h2Element = element.querySelector('h2'); var sloganElement = element.querySelector('.slogan'); logoElement.style.setProperty('color', 'white'); sloganElement.style.setProperty('color', 'white'); h2Element.style.setProperty('color', 'white'); } else if (element.classList.contains("three")) { var textThreeOne = element.querySelector('.text-threeone'); var textThreeTwo = element.querySelector('.text-threetwo'); var p = element.querySelector('.text-threetwo + p'); textThreeOne.style.setProperty('color', 'white'); textThreeTwo.style.setProperty('color', 'white'); p.style.setProperty('color', 'white'); var lightsOff = document.querySelector("#lights-off"); var lightsOn = document.querySelector("#lights-on"); lightsOff.style.display = "block"; lightsOn.style.display = "none"; var blackmoon = document.querySelector(".moon"); blackmoon.style.display = "block"; } else if (element.classList.contains("five")) { var inputs = element.querySelectorAll('input'); var textarea = element.querySelector('textarea'); var submitBtn = element.querySelector('input[type="submit"]'); inputs.forEach(input => { input.style.setProperty('background-color', '#1f1f1f'); input.style.setProperty('color', '#ffffff'); }); textarea.style.setProperty('background-color', '#1f1f1f'); textarea.style.setProperty('color', '#ffffff'); submitBtn.style.setProperty('background-color', '#1f1f1f'); // Toevoegen muisover kleur submitBtn.style.setProperty('transition', 'background-color 0.2s'); submitBtn.addEventListener("mouseover", function() { submitBtn.style.setProperty('background-color', '#101010'); }); submitBtn.addEventListener("mouseout", function() { submitBtn.style.setProperty('background-color', '#1f1f1f'); }); var contact = element.querySelector('#contact'); var pOne = element.querySelector('.five>p+p'); var pTwo = element.querySelector('.five>p+p+p'); contact.style.setProperty('color', 'white'); pOne.style.setProperty('color', 'white'); pTwo.style.setProperty('color', 'white'); } else { element.style.setProperty('color', 'white'); } } else { if (element.classList.contains("one")) { var logoElement = element.querySelector('.logo'); logoElement.style.setProperty('color', '#353535'); var sloganElement = element.querySelector('.slogan'); sloganElement.style.setProperty('color', '#353535'); var sloganElement = element.querySelector('h2'); sloganElement.style.setProperty('color', '#353535'); var blackmoon = document.querySelector(".moon"); blackmoon.style.display = "none"; } else if (element.classList.contains("three")) { var textThreeOne = element.querySelector('.text-threeone'); var textThreeTwo = element.querySelector('.text-threetwo'); var p = element.querySelector('.text-threetwo + p'); var lightsOff = document.querySelector("#lights-off"); var lightsOn = document.querySelector("#lights-on"); lightsOff.style.display = "none"; lightsOn.style.display = "block"; p.style.setProperty('color', '#353535'); textThreeOne.style.setProperty('color', '#353535'); textThreeTwo.style.setProperty('color', '#353535'); } else if (element.classList.contains("five")) { var inputs = element.querySelectorAll('input'); var textarea = element.querySelector('textarea'); var submitBtn = element.querySelector('input[type="submit"]'); inputs.forEach(input => { input.style.setProperty('background-color', '#efefef'); input.style.setProperty('color', 'black'); }); textarea.style.setProperty('background-color', '#efefef'); textarea.style.setProperty('color', 'black'); submitBtn.style.setProperty('background-color', '#437bff'); submitBtn.style.setProperty('color', 'white'); // Toevoegen muisover kleur submitBtn.style.setProperty('transition', 'background-color 0.2s'); submitBtn.addEventListener("mouseover", function() { submitBtn.style.setProperty('background-color', '#133edb'); }); submitBtn.addEventListener("mouseout", function() { submitBtn.style.setProperty('background-color', '#437bff'); }); var contact = element.querySelector('#contact'); var pOne = element.querySelector('.five>p+p'); var pTwo = element.querySelector('.five>p+p+p'); contact.style.setProperty('color', '#353535'); pOne.style.setProperty('color', '#353535'); pTwo.style.setProperty('color', '#353535'); } } }); }

 .one, .three, .five { transition: 1500ms; }

 <div> <button class="darkmodebtn" onclick="myFunction()"></button> <img id="lights-off" src="../images/darkmode.png" style="display: none;"> <img id="lights-on" src="../images/ABC.png"> </div>

Answer 1

 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>

所以这里有 2 个版本，显示和可见性。

要查看真正的用法差异，在 HTML 中，将容器 2 和按钮 2 的块放在 1 之前。由于可见性，空间得以保留。

对于代码，我将打开和关闭作为 2 个函数，可以分组为 1 作为切换 function。可以在第一种情况下检测样式不透明度，在第二种情况下检测可见性。

你可以玩延迟。 请注意，将显示更改为打开并将可见性更改为可见时会有一点延迟。 浏览器需要很少的时间来呈现它。

您可以玩转图像及其延迟。 如果更改转换时间，请相应更改关闭延迟。

您可以轻松地将其调整为您的代码。

Answer 2

好的新代码片段，我使用您的 html 将 2 个功能合二为一

 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>