如何在js中实现class绑定

Question

刚开始做前端，想实现一个深色模式的动画。

当你点击开关（一根绳子）时，页面会改变主题。

但是我不知道如何像vue的class绑定那样用js来添加动画


@keyframes line {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(0);
  }
}

.pull {
  animation: line 0.5s;
}

在vue中就是这样（网上找的）

<div
  class="switch"
  :class="{ 'pull': inAnimation }"
  @animationend="animationEnd"
  @click="changeTheme"
/>

这是我的代码。

不知道怎么用js来完成

const sw = document.getElementById('switch');

const changeTheme = () => {
  sw.addEventListener("click", () => {
    sw.className = 'pull';
    if (document.body.className !== "dark") {
      document.body.classList.add("dark");
      localStorage.setItem("css", "dark");
    } else {
      document.body.classList.remove("dark");
      localStorage.removeItem("css");
    }
    sw.className = '';
  });

  if (localStorage.getItem("css")) {
    document.body.className = "dark";
    document.body.classList.add("dark");
  }
  
};

changeTheme();

Answer 1

首先，我发现您错过了元素的 id，因为您正在使用 getElementById，它必须像：

<div
  id="switch" <!-- this is missing -->
  class="switch"
  :class="{ 'pull': inAnimation }"
  @animationend="animationEnd"
  @click="changeTheme"
/>

然后，根据是否使用Vue。（如果是 Vue，请在与上述元素相同的组件中设置代码）。

Vue

<script>

export default {
    mounted() {
        const sw = document.getElementById('switch');
        sw.addEventListener("click", () => {
            sw.classList.add('pull');
            if (!document.body.classList.contains("dark")) {
            document.body.classList.add("dark");
            localStorage.setItem("css", "dark");
            } else {
            document.body.classList.remove("dark");
            localStorage.removeItem("css");
            }
            setTimeout(() => {
              sw.classList.remove("pull")
            }, 600);
        });

        if (localStorage.getItem("css")) {
            document.body.classList.add("dark");
        }   
    }
}
</script>

if 原版 Js

const sw = document.getElementById("switch");
if (sw) {
  const changeTheme = () => {
    sw.addEventListener("click", () => {
      sw.classList.add("pull");
      if (!document.body.classList.contains("dark")) {
        document.body.classList.add("dark");
        localStorage.setItem("css", "dark");
      } else {
        document.body.classList.remove("dark");
        localStorage.removeItem("css");
      }
      setTimeout(() => {
        sw.classList.remove("pull");
      }, 600);
    });

    if (localStorage.getItem("css")) {
      document.body.classList.add("dark");
    }
  };
  changeTheme();
}

如何在js中实现class绑定

how to implement a class bindings in js

javascript

animation

class

vue.js