问如何在js中实现类绑定
EN

Stack Overflow用户

提问于 2021-11-03 22:28:39

回答 1查看 57关注 0票数 0

我刚开始前端，想要实现一个黑暗模式的动画.

当您单击开关(绳子)时，页面将更改主题。

但是我不知道如何使用js来添加动画，比如vue的类绑定。

@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();

javascript

vue.js

class

animation

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-03 23:30:00

首先，我看到您忽略了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>

如果Vanilla 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();
}