使用Javascript中的“classList.toggle”执行动画更改元素的类答案

【问题标题】：Execute an Animation changing the class of an element usign "classList.toogle" in Javascript使用Javascript中的“classList.toggle”执行动画更改元素的类
【发布时间】：2021-10-25 23:54:21
【问题描述】：

当我使用 JavaScript 中的 classList.toggle 属性更改表单的输入类和标签时，我一直在尝试使用 CSS 添加淡入淡出动画。我不明白为什么我的代码不起作用，它正确更改了类但动画没有发生；是不是我做错了什么？

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>

【问题讨论】：

css 中的错字form -> from

标签： javascript html css dom css-animations

【解决方案1】：

为了更好的平滑动画切换使用csstransition，animation属性更难调整。平滑更改文本的解决方案，在 label 内创建两个元素并交替显示。

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>

【讨论】：