Question 45586 in CSS Question posted in
Some basic documentation can be found here.

How to make image transition smoothly with toggle button – CSS

I used transition to make the change smooth and it is working, but for the image I couldn’t setup well. How can I fix this?

I tried this:

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

And this:

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

Here is the full code:

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>
Tags:

2

Answers


  1. 0 
    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>

    So here you have the 2 versions, display and visibility.

    To see the real usage difference, in the HTML, put the block of container 2 and buttons 2 before the 1. With visibility the space is preserve.

    For the code, I left on and off as 2 functions, can grouped in 1 as a toggle function. Detection could be done on style opacity in first case and visibility on second.

    You can play with the delay. Note that there is a little delay to put when changing display to on and visibility to visible. Browser need little time to render that.

    You can play with transition on image and its delay. If you change transition timing, change the off delay accordingly.

    You can adapt this for your code easily.

    Login or Signup to reply.
  2. 0

    ok new snippet, I mixed the 2 functions in 1 using your 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search