CODEWITHSUNDEEP
javascripthtmlcssdomcss-animations
user16753127
user16753127

Reputation:

Execute an Animation changing the class of an element usign "classList.toogle" in Javascript

I have been trying to add a fade animation with CSS when I change the class of the input and label of the form using the classList.toggle property in JavaScript. I don't understand why my code doesn't work, it change the class correctly but the animation doesn`t happen; is there something I'm doing wrong?

const checkBox = document.querySelector('#checkBox');
const label = document.querySelector('#label');

function verify() {
  if (checkBox.checked) {
    label.innerHTML = '<-<span>Un</span>Checked :)'
  }

  if (checkBox.checked == false) {
    label.innerHTML = '<-UnChecked :('
  }
}


checkBox.addEventListener('click', verify);
checkBox.click();


setInterval(() => {

  checkBox.click();
  label.classList.toggle('animation');
  checkBox.classList.toggle('animation');
  label.classList.toggle('animation2');
  checkBox.classList.toggle('animation2');

  setTimeout(() => {
    checkBox.click()
    label.classList.toggle('animation');
    checkBox.classList.toggle('animation');
    label.classList.toggle('animation2');
    checkBox.classList.toggle('animation2');

  }, 2000);
}, 4000);
* {
  font-family: 'Cartograph CF';
}

#checkBox {
  height: 20px;
  width: 20px;
  margin-right: 10px;
}

form {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  font-size: 30px;
}

label {
  user-select: none;
}

.animation {
  animation: fade .3s ease-in-out forwards;
  opacity: 0;
}

.animation2 {
  animation: fade .3s ease-in-out forwards;
  opacity: 0;
}

span {
  opacity: 0;
}

@keyframes fade {
  form {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form>

    <input type="checkbox" id="checkBox" class="animation">
    <label for="checkBox" id="label" class="animation"><-UnChecked :(</label>

  </form>
</body>

</html>

Upvotes: 1

Views: 862

Answers (1)

Anton
Anton

Reputation: 8538

For smooth animation switching better to use the css transition, the animation property is more difficult to adjust. Solution to smooth change text, to create two elements inside label and showing those alternately.

const checkBox = document.querySelector('#checkBox');
const visible = document.querySelector('.visible');
const hidden = document.querySelector('.hidden');

function verify() {
  if (checkBox.checked) {
    checkBox.classList.remove('animation');
    visible.classList.add('animation');
    hidden.classList.remove('animation');
  }

  if (!checkBox.checked) {
    checkBox.classList.add('animation');
    visible.classList.remove('animation');
    hidden.classList.add('animation');
  }
}

checkBox.addEventListener('click', verify);
checkBox.click();

setInterval(() => {
  checkBox.checked = false;
  checkBox.classList.remove('animation');
  visible.classList.remove('animation');
  hidden.classList.add('animation');

  setTimeout(() => {
    checkBox.checked = true;
    checkBox.classList.add('animation');
    visible.classList.add('animation');
    hidden.classList.remove('animation');
  }, 2000);
}, 4000);
* {
  font-family: 'Cartograph CF';
}

#checkBox {
  height: 20px;
  width: 20px;
  margin-right: 10px;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

form {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  font-size: 30px;
}

label {
  width: 250px;
  height: 30px;
  user-select: none;
  position: relative;
}

.animation {
  opacity: 0;
}

span {
  position: absolute;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
<form>
  <input type="checkbox" id="checkBox" class="animation" />
  <label for="checkBox" id="label"><span class="visible"><-UnChecked :(</span>
        <span class="hidden animation"><- Checked :)</span></label
      >
    </form>

Upvotes: 1

Related Questions