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

【问题标题】：How to make image transition smoothly with toggle button如何使用切换按钮使图像平滑过渡
【发布时间】：2023-02-02 01:18:50
【问题描述】：

我使用 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>

【问题讨论】：

你不能在 none <-> 块之间“平滑”。是/否。唯一的方法是使用 javascript。从开到关：首先将不透明度设置为 0，然后将不显示设置为动画。从关闭到开启：您将不透明度设置为 0，显示块，将不透明度设置为 1。使用隐藏的可见性存在变化，使用相同的想法可见
你能把正确的代码发给我吗？需要我这样写吗？ : var lightsOff = document.querySelector("#lights-off"); var lightsOn = document.querySelector("#lights-on"); lightsOff.style.opacity = 0; setTimeout(function() { lightsOff.style.display = "none"; }, 1000);

标签： javascript html css css-transitions

【解决方案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 作为切换函数。可以在第一种情况下检测样式不透明度，在第二种情况下检测可见性。

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

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

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

【讨论】：