Why does the button visibilty change first and label visibility is second with a huge delay?

user_14523947 0
Viewed 39

For some reason it takes the toggle slider longer to disappear than the button, why is that and how can I fix it? I added most of the CSS so because it might have to do with it but I have no idea. It might have to do with the toggle switch having things inside but I'm really new and can't tell, it isn't apparent why there is a delay. I can probably deal with the delay as long as everything disappears at once at least.

const btn = document.getElementById('btn');
const toggle = document.getElementById('switch');

btn.addEventListener('click',function(){
  btn.style.visibility = 'hidden'
  toggle.style.visibility = 'hidden'
})
html{
  background-color: white;
}

body{
  background-color: #0d1130;
  width: 450px;
  height : 560px;
  margin: 0px;
  
}

.btns{
  display: block;
  margin-bottom:5px;
  position: relative;
  left: 35%;
  top: 35%;
  width: 150px;
  font-size: 30px;
  z-index: 1;
  background-color: #10185c;
  color: white;
  border-radius: 5px;
  border-color: #1e2a82;
}

.btns:hover{
  background-color: #1e2a82;
}

.switch{
  
  position: relative;
  display: inline-block;
  top: 33.75%;
  left: 35%;
  width: 148px;
  height: 37.5px;
  z-index: 1;
  border-width: 5px;
  /* visibility: hidden; */
  
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #10185c;
  border-radius: 5px;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 29px;
  width: 29px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  color:#050A30;
  font-size: 18px;
  text-align: center;
  content: '1x';
  border-radius: 5px;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #1e2a82;
}

input:checked + .slider:before {
  -webkit-transform: translateX(112px);
  -ms-transform: translateX(112px);
  transform: translateX(112px);
  content: '2x';
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>

    <label class="switch" id="switch">
      <input type="checkbox" id="checkbox">
      <span class="slider"></span>
    </label>
    <button id="btn" class="btns">button</button>
    <script src="script.js"></script>

  </body>
</html>

css html javascript
1 Answers

Remove the transition .4s. If you really need the transition you can add a delay in your function

var delayInMilliseconds = 400; 

setTimeout(function() {
  btn.style.visibility = 'hidden'
}, delayInMilliseconds);
user_111062410
Related