2

I thought this would be nice and simple; however, I cannot seem to get it to work. I am trying to get a DIV element to fade in and out depending on if a checkbox is selected, instead of just appearing and disappearing in an instant.

Here is my code:

HTML -

<div id="logPad" name="logPad" class="buttonZ logPad" onclick="remfunc2();"></div>

<div class="logSlider">
  <input type="checkbox" name="logSlider" class="logSlider-checkbox"
    id="logSlider" tabindex="0" onclick="sliderJS();" />
  <label class="logSlider-label" for="logSlider">
    <span class="logSlider-inner"></span>
    <span class="logSlider-switch"></span>
  </label>
</div>

CSS for the 'logPad'-

.logPad {
  min-width: 225px;
  display: none;
  max-height: 200px;
  min-height: 15px;
  transition: 10s;
}

Now I'm not sure where the transition should be applied, I was thinking through JavaScript most likely, so I have tried a few things, but I am still learning JS and not that great at it.

This is my JS for hiding and showing the logPad div on 'checkbox' toggle, the toggle has been converted into a slider rather than a checkbox, this is done through CSS but I'm not sure this is relevant here as im sure the CSS for the slider is not where the transition for the logPad div will go.

function sliderJS() {
  var checkBox = document.getElementById("logSlider");
  if (checkBox.checked == true) {
    document.getElementById('logPad').style.display = "block";
  } else {
    document.getElementById('logPad').style.display = "none";
  }
}

Please can someone explain where this would be applied? the current transition in the class does not have an effect.

nikc.org
  • 16,462
  • 6
  • 50
  • 83
srcomptn
  • 81
  • 1
  • 8
  • 1
    Setting `display` to `none` removes the element; if you want it to transition, you need a property like `opacity` changing from 1 to 0. This will not remove the element, just make it invisible, so if you want it completely gone after the fading out, you need to remove it in a setTimeout callback. –  Oct 05 '20 at 10:09
  • Thanks @ChrisG Ive changed to using Opacity and it works great now. – srcomptn Oct 05 '20 at 10:20
  • Regarding your comment below, I told you how to fix that in my comment above :) –  Oct 05 '20 at 10:22
  • @ChrisG I completely missed that! Thank you, I've never used setTimeout before so this will be fun to learn, I understand it sets a timer before the function is activated so ill give this a try. – srcomptn Oct 05 '20 at 10:32
  • @ChrisG how would I get the display to set to 'block' again before showing the element? Surely it wouldn't fade in as the display would be set to none from the setTimeout callback? – srcomptn Oct 05 '20 at 10:34
  • It's still at `opacity: 0` so you can just set `display` back to `block`, then `opacity` to `1`. However it's possible that you need to do the second command in a setTimeout with a timeout of 0 for it to work. –  Oct 05 '20 at 11:22

1 Answers1

3

Short answer: you can't transition display.

You can, however transition opacity.

Also, it would be nice to use a class for a hidden state with opacity: 0 and then you can do something like:

document.getElementById('logPad').classList.toggle('hidden', !checkBox.checked);
Robo Robok
  • 21,132
  • 17
  • 68
  • 126
  • I did not realise, thats great thank you. Im using opacity now and ive managed to get it working, the only thing is that the div technically takes up the space still so when its 'hidden' the page does not rearrange like it use to :( but thats not so bad! thanks – srcomptn Oct 05 '20 at 10:19
  • Yes, `opacity` still keeps the element. On the other hand, fading out and making other content jump is not that great neither. You can think about animating `height` or another property to gradually hide an element. Your element could either just shrink or shrink + fade out at the same time. – Robo Robok Oct 05 '20 at 11:03