如何使用切換按鈕使圖像平滑過渡

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>